Discussion :

[StringBuilder]

Bonjour,

J'ai découvert JavaScript fin 90, et à l'époque, c'était tout simple : séquentiel, tout va bien.

Seulement maintenant, tout est asynchrone, et en l'absence de formation / personne qui maîtrise sous la main, je galère un max pour ordonnancer mes actions et retrouver le contexte de fonctionnement.

Je vais donc vous donner un exemple de ce que je veux faire en synchrone, et j'espère que vous saurez m'indiquer comment faire la même chose en asynchrone.

Mettons donc un framework qui permet de faire du CRUD dans une table.

Mettons que je dois augmenter le salaire de tous les cadres d'une société si celle-ci a fait du bénéfice.

Ca va donc donner, en algo, un truc du genre :
Création d'une variable "Augmentation" égale 0.
Je recherche les infos de la société à partir de son ID.
Si BENEFICE > 0, alors je fais rechercher l'ensemble des salariés de la société.
Pour chaque salarié, si un CONTRAT = "Cadre", alors je charge son salaire, y additionne 10%, et incrémente aussi la variable "Augmentation" des 10%.
Je retourne la variable "Augmentation".

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function AugmentationCadres(idSociete, pourcent)
{
    var augmentation = 0;
 
    var infoSociete = CRUD.Load({ Table: "SOCIETE", Id: idSociete });
    if (infoSociete != null && infoSociete.BENEFICE > 0) {
        var listeSalaries = CRUD.LoadList({ Table: "SALARIE", Where: "soc_id = " + infoSociete.ID.ToString() });
        for (i = 0; i < listeSalaries.Count; i++) {
            var infoSalarie = CRUD.Load({ Table: "SALARIE", Id: listeSalaries[i].Id });
            if (infoSalarie != null && infoSalarie.CONTRAT == 'Cadre') {
                var aug = infoSalarie.SALAIRE * pourcent;
                augmentation += aug;
                infoSalarie.SALAIRE += aug;
                CRUD.Update({ Table: "SALAIRE", Record: infoSalarie });
            }
        }
    }
 
    return augmentation;
}

Youpi tralala, tout le monde est content (aux détails d'erreur de syntaxe).

Maintenant, pas de pot, tout mon framework est asynchrone, chaque méthode de CRUD attends un callback.
Comment faire ?

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
function AugmentationCadres(idSociete, pourcent)
{
    var augmentation = 0;
 
    // Comment je passe mon pourcentage à ma société ?
    CRUD.Load({ Table: "SOCIETE", Id: idSociete }, societeChargee);
 
    // Renvoie toujours 0
    return augmentation;
}
 
function societeChargee(res)
{
    if (res != null && res.BENEFICE > 0) {
        CRUD.LoadList({ Table: "SALARIE", Where: "soc_id = " + res.ID.ToString() }, listeSalariesChargee);
    }
}
 
function listeSalariesChargee(res)
{
    for (i = 0; i < res.Count; i++) {
        CRUD.Load({ Table: "SALARIE", Id: listeSalaries[i].Id }, salarieCharge);
    }
}
 
function salarieCharge(res)
{
    if (res != null && res.CONTRAT == 'Cadre') {
        var aug = infoSalarie.SALAIRE * pourcent; // Comment je récupère mon poucentage ?
        augmentation += aug; // Comment je propage ma variable ?
        infoSalarie.SALAIRE += aug;
        CRUD.Update({ Table: "SALAIRE", Record: infoSalarie }, null);
    }
}

[Marco46]

Il te faut utiliser un système de promesses.

Le grand classique en la matière.

[StringBuilder]

Outre le fait que j'ai absolument rien compris à vos promesses, j'avoue que j'ai pas du tout vu de lien avec mon problème

(accessoirement, je ne pense pas pouvoir utiliser cette librairie : mon code javascript est chargé à la volée depuis une application existante, et je ne pense pas avoir le moyen d'ajouter des références à des scripts externes : j'ai pas la main sur les balises <script> de la page).

[Marco46]

j'avoue que j'ai pas du tout vu de lien avec mon problème

Ben :

Maintenant, pas de pot, tout mon framework est asynchrone, chaque méthode de CRUD attends un callback.
Comment faire ?

Le système de promesse te sert à synchroniser ce qui est asynchrone. Je peux pas t'expliquer ici comment ça fonctionne ça reviendrait à écrire un tutoriel.

(accessoirement, je ne pense pas pouvoir utiliser cette librairie : mon code javascript est chargé à la volée depuis une application existante, et je ne pense pas avoir le moyen d'ajouter des références à des scripts externes : j'ai pas la main sur les balises <script> de la page).

Bah si t'as pas la main sur le code je vois mal comment tu vas pouvoir faire quoi que ce soit !

Je comprends pas trop là ...

[StringBuilder]

Je peux créer des fichiers *.js

Ils doivent être déclérés d'une certainement manière, et à ce moment, le programme sur lequel je travaille intègre mes js aux fichiers standard et expose mes classes à l'application.

Mais je n'ai pas du tout la main sur l'application elle-même pour inclure d'autres scripts.

En gros, voici un script que j'ai écrit hier :

Fichier JSON qui va me permettre de charger mon script :

cu.module.json

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
{
	"dependsOn": ["base"],
	"types": {
		"CU": {
			"scripts": [ "cu/cu.js" ]
		},
		"PriorityReader" : {
			"scripts": [ "cu/priorityreader.js" ],
			"dependsOn": [ "CU" ]
		}
	}
}

Scirpt de mon namespace cu.js :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
(function () {
 
	/*
	    "u8.CU" is a namespace and namespaces must not contain functions, just types!
	*/
 
	u8.CU = {
		// create the root namespace for all CU template types
	};
 
	$.extend(u8.CU, {
 
	}); 
})();

Fichier contenant ma fonction que j'ai passé une journée à écrire et qui fait que le quart du boulot :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
(function () {
    u8.CU.PriorityReader =
	{
		Read: function(e)
		{
			u8.services.crud.readLink({ uid: e.uid, linkName: "$Link[MA]" }, this.NavigateTo);
			u8.services.crud.update({ uid: e.uid, fields: [{ field: "F7024", value: "Y" }] }, function(sender, args)
			{
					if (args.businessObject)
					{
						console.info("PriorityReader set to \"read\".");
					}
					else
					{
						console.log("Error while updating PriorityReader!");
						console.dir(args.businessObject);
					}
			});			
		},
 
		NavigateTo: function(sender, args)
		{
			if (args.businessObject)
			{
				console.info("Navigate to linked MA.");
				/*u8.services.navigation.navigateToPage("Tree", { uid: args.businessObject.uid, createNewTab: true, viewMode: "Edit", onProceed: "$back" });*/
				u8.services.navigation.navigateToPage("Process", { name: "TE_OpenRecordInCompanyTreeview", uid: args.businessObject.uid, createNewTab: true });
			}
			else
			{
				console.log("This PriorityReader isn't linked to a MA!");
				console.dir(args);
			}
		}
    };
})();

Donc j'ai aucune moyen de faire un include du script que tu me soumets. Je dois me démerder avec les moyens du bord.

[SylvainPV]

Il faudrait voir comment est codée cette bibliothèque de fonctions CRUD. Il y a plusieurs façons de gérer du code asynchrone, dont les deux plus connues sont les callbacks et les Promise.

Les callbacks sont un argument supplémentaire de type fonction à passer aux fonctions asynchrones, généralement en dernier argument. Cette fonction est appelée quand l'API a fini son boulot asynchrone :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
    CRUD.Load({ Table: "SOCIETE", Id: idSociete },  appelleMoiQuandTuAsFiniAvecMaValeur);
 
function appelleMoiQuandTuAsFiniAvecMaValeur(societeChargee){
      console.log(societeChargee)
}

Les callbacks sont simples mais deviennent rapidement pénibles à gérer quand on fait plusieurs opérations asynchrones d'affilée. Cela amène à passer des fonctions à des fonctions à des fonctions, jusqu'à former des pyramides de code illisibles: http://callbackhell.com/

On a donc inventé les Promise pour éviter ça. A la base, c'était des bibliothèques, aujourd'hui ça fait partie du standard ECMAScript 2015 et tous les navigateurs modernes ont l'API Promise.
Les Promise, c'est un style d'API chaînable pour les opérations asynchrones. Un peu comme on chaîne les méthodes avec jQuery, on peut chaîner des opérations asynchrones "programmées", qui promettent de retourner une réponse ou une erreur dans un certain délai.
Bref, c'est une manière plus élégante de coder en asynchrone, et je t'invite à te renseigner davantage sur le sujet. Parce que les Promise et la prog fonctionnelle, c'est cool

A noter que l'instruction return ne sert à rien pour les fonctions asynchrones (puisque le cycle d'exécution de la fonction JS se termine en quelques millisecondes alors qu'une requête BDD ou autre opération asynchrone peut prendre bien plus longtemps). Pour la même raison, on ne peut pas transformer quelque-chose d'asynchrone en synchrone: à partir du moment où une fonction est asynchrone, toutes les fonctions appelantes le seront également ! Ça changera bientôt avec la norme ECMAScript 2016 et les mots-clés async/await (pour le meilleur et pour le pire).

[sekaijin]

il y a la gestion événementielle qui là aussi réponds au problème.

les lib la mettant en oeuvre repose sur les callbacks
à chaque action asynchrone lorsqu'on invoque l'action la lib fait l'appel et place une calback générique qui consiste à émettre un ou plusieurs événements.

du coup on ne gère plus de calback mais on s'abonne à des événements.
la différence c'est que la calback est lié à l'appel et est unique (un appel une calback) alors que l'événement est lié à un objet (window par exemple) et peut avoir autant d'abonné que l'on veut.

A+JYT

[danielhagnoul]

[...] Pour la même raison, on ne peut pas transformer quelque-chose d'asynchrone en synchrone: à partir du moment où une fonction est asynchrone, toutes les fonctions appelantes le seront également ! Ça changera bientôt avec la norme ECMAScript 2016 et les mots-clés async/await (pour le meilleur et pour le pire).

Information : async/await est arrivé à l'étape 4 et sera normalement inclus dans ES2017

[SylvainPV]

Ah oui, c'est vrai que ES2016 ne contient presque rien et qu'ils ont repoussé ça à ES2017. Je m'y perds avec leurs numéros..