Résultat undefined sur requête

Version imprimable

Bonjour à tous,

Je débute avec nodeJS, je bloque sur un truc qui doit être tout c.. mais je ne comprend pas :(

Dans une route :

Code:

app.get('/bieres/', bieres.index);

Dans le controller correspondant j'ai :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 exports.index = function(req, res) { res.render('inc_bieresListing.jade', {params: {categorie: getCategories() }}); } var getCategories = function() { console.log('ici1'); var temp=''; sql.query(mysql.format(req_boissoncategorie_sel1)).done(function (r) { for (i = 0; i < r.length; i++) { temp += i + " "; console.log('ici2'); } console.log('ici2'); return temp; }); console.log('ici3'); }
Dans les logs, j'ai :
Code:

1 2 3 4 5 6 7 8 ici1 ici3 GET /bieres/ ... ici2 ici2 ici2 ici2 GET /css/font....
Je comprend que la fonction getCategories est bien appelé, que les instructions sont appelées dans l'ordre et le résultat correspondant à la rapidité d'exécution de chaque instruction.

Dans jade :
l'affichage de

Code:

#{params}

me donne '[object Object]'
l'affichage de

Code:

#{params.categorie}

me donne 'undefined'

Cela veux dire que la page est affichée avant d'avoir le résultat d'appel de getCategories ?

Tout à fait!

En node.js, les entrées/sorties (I/O) (les appels en base de données, la lecture/écriture de fichier, ...) sont asynchrones. Ceci afin de ne pas faire attendre les autres requêtes tout en ne multipliant pas les processus (comme en PHP par exemple) et en optimisant donc l'utilisation processeur.

Comme tu rends ton template jade dans le même flux synchrone que l'appelle de ta requête, le retour n'existe pas quand tu commences à rendre. A ce moment là, en fait, ta requête a à peine commencée a récupérer tes catégories (dans un processus asynchrone distinct). Il faut que tu mettes le render dans la callback de ta requête SQL, callback qui est appelée avec, en argument, la liste de tes catégories et au moment où le processus asynchrone a fini de les récupérer donc. Cela donne un code comme celui-ci a peu près (en reprenant ce que tu as fait au maximum, ce qui veut dire que les nommages sont certainement à revoir):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 exports.index = function(req, res) { getCategories(res); } var getCategories = function(res) { console.log('ici1'); var temp=''; sql.query(mysql.format(req_boissoncategorie_sel1)).done(function (r) { for (i = 0; i < r.length; i++) { temp += i + " "; console.log('ici2'); } console.log('ici2'); res.render('inc_bieresListing.jade', {params: {categorie: temp}}); }); console.log('ici3'); }
N'hésite pas à me dire si je n'ai pas été clair!

03/02/2016, 20h16
Slayes

Impec :)

Merci :)
04/02/2016, 10h11
Gnuum

Pas de problème! :)

A noter, pour aller plus loin, que ce pattern de callback n'est pas le seul à traiter cette problématique de l'asynchronicité. On peut y ajouter les promises ainsi que les générateurs et itérateurs en ES6.

Je me permet de revenir vers toi, je pense avoir bien compris le système "d'asynchronisité" des exécutions, mais je ne voie pas comment adapter le code en fonction. Par exemple, ci-dessous un début de code de vérif de formulaire :
Code:

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 name = req.body.nom.trim(); fournisseur = req.body.fournisseur.trim(); idCategorie = parseInt(req.body.categorie) || 0; var error = []; if (!name) error.push({'message':'Le nom de la boisson est obligatoire.'}); else { sql.query(mysql.format(req_boissons_sel2, name)).done(function (r) { if (Object.keys(r).length > 0) error.push({'message': 'Cette boisson existe déjà.'}); console.log(1); }); } if (fournisseur) { sql.query(mysql.format(req_brasseries_sel1, fournisseur)).done(function (r) { if (Object.keys(r).length > 0) error.push({'message': 'Cette boisson existe déjà.'}); console.log(1); }); } if (idCategorie == 0) error.push({'message': 'La catégorie est obligatoire.'}); if (req.file) { var file = req.file; if(file.size > 3000000) error.push({'message':'La taille maximale du logo est 3M.'}); if(file.mimetype !== 'image/png' && file.mimetype !== 'image/jpg' && file.mimetype !== 'image/jpeg' && file.mimetype !== 'image/svg+xml') error.push({'message':'Les formats de logo supportés sont jpeg, jpg, svg et png.'}); } console.log(2); if (Object.keys(error).length > 0 ) { if (req.file) fs.unlinkSync(req.file.destination + req.file.filename); res.setHeader('Content-Type', 'application/json'); console.log(JSON.stringify({"error": error})); res.send(JSON.stringify({"error": error})); return; }
Les logs de la console le renvoient :
2
{"error":[{"message":"La catégorie est obligatoire."}]}
POST /boissons/ 200 17.053 ms - 56
1

Je comprend que le script vérifie le name :
- si pas présent => log un message d'erreur
- si présent, je vérifie que le name n'éxiste pas dans la base. Ce proccess prenant un temps d’exécution, le script poursuit l’exécution des lignes suivantes. ...
Bref le résultat est renvoyé alors que la partie liée à la bdd n'est pas achevée.

J'ai donc pensé à découpé le code en différente fonction pour les "promisées". Mais il faudrait donc que je découpe le script en 36 morceaux ? C-A-D :
- 1 pour la verif du name
- 1 pour la verif de la categorie
- 1 pour la vérif de l'image

...etc

En fait, le moyen le plus rapide mais qui va rendre ton code moche et qui n'est pas performant, c'est d'empiler les callbacks les unes dans les autres.
En gros, un truc du style:
Code:

1 2 3 4 5 6 7 8 9 function checkName() { executeSQLRequest(requestCheckName, function checkCategory() { executeSQLRequest(requestCheckCategory, function checkProvider() { executeSQLRequest(requestCheckProvider, function() { res.send(); }); }); }); }
Ce code n'est pas évolutif (défaut de factorisation), deviendra rapidement difficile à maintenir et n'est pas performant car chaque requête attend que celle d'avant soit terminée.

En fait, ce que tu voudrais c'est exécuter ces 3 requêtes en parallèle (c'est un des principaux intérêts de gérer les I/O en asynchrone), puis exécuter un callback quand tu as tous les résultats.
Or, ce n'est pas trivial du tout à coder soi-même!
La plupart des gens utilisent la bibliothèque async.js pour faire ce genre de choses.

Si tu as envie d'être aidé un peu plus dans ton développement node.js et notamment la gestion de l'asynchronicité, je peux te suggérer de jeter un coup d'oeil à mon framework Danf qui aide beaucoup à gérer ça simplement (il découple ton code métier de ta gestion de séquence synchrone/asynchrone notamment). Voici un lien vers un tutoriel en français qui explique globalement le concept.
Je suis à ta disposition si tu as des questions sur le framework bien sûr et/ou pour te guider dans l'adaptation de ton code avec le framework pour que tu vois ce que ça peut donner.

J'avais trouvé la lib 'async' entre temps, je n'avais pas bien enregistré que les codes qui s’exécutent en parallèle sont ceux qui possède une callback. ( maintenant en l'écrivant ça parait logique ....)
Ce que donne le code modifié,

Code:

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
38
39
async.parallel([
	function(callback){
		if (!name) {
			error.push({'message':'Le nom de la boisson est obligatoire.'});
			callback();
		} else {
			sql.query(mysql.format(req_boissons_sel2, name)).done(function (r) {
				if (Object.keys(r).length > 0) error.push({'message': 'Cette boisson existe déjà.'});
				callback();
			});
		}
	},
	function(callback){
		if (fournisseur) {
			sql.query(mysql.format(req_brasseries_sel1, fournisseur)).done(function (r) {
				if (Object.keys(r).length > 0) error.push({'message': 'Ce fournisseur existe déjà.'});
				callback();
			});		
		} else callback();
	},
	function(callback){
		if (idCategorie == 0) error.push({'message': 'La catégorie est obligatoire.'});
		if (req.file) {
			var file =  req.file;
			if(file.size > 3000000) error.push({'message':'La taille maximale du logo est 3M.'});
			if(file.mimetype !== 'image/png' && file.mimetype !== 'image/jpg' && file.mimetype !== 'image/jpeg' && file.mimetype !== 'image/svg+xml') error.push({'message':'Les formats de logo supportés sont  jpeg, jpg, svg et png.'});
		}
		callback();
	},
],
function(err, results){
	if (Object.keys(error).length > 0 ) {
		if (req.file) fs.unlinkSync(req.file.destination + req.file.filename);
		res.setHeader('Content-Type', 'application/json');
		console.log(JSON.stringify({"error": error}));
		res.send(JSON.stringify({"error": error}));
		return;
	}
});

Ça alourdi un peu la chose, mais je suppose que l'appel de la callback à chaque 'branche' du code est nécessaire pour indiqué à la lib qu'une fonction d'entrée est terminée. Afin que la lib puisse exécuté le code la callback lorsque toutes les fonctions d'entrées sont terminées !?

J'ai parcouru le tuto pour Danf, mais j'avoue n'avoir pas trop compris. A quelle niveau, il pourrait me simplifier le code ?

Oui c'est bien ça pour async en effet.

En gros, ce que ça donnerait avec le framework.
Tout d'abord, tu aurais une classe:

Code:

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
38
39
40
41
42
43
44
45
46
47
48
49
// lib/server/repository.js
 
module.exports = Repository;
 
function Repository() {
}
 
Repository.prototype.checkName = function(name) {
    var error = [];
    if (!name) {
        error.push({'message':'Le nom de la boisson est obligatoire.'});
    } else {
        this.__asyncProcess(function(returnAsync) {
            sql.query(mysql.format(req_boissons_sel2, name)).done(function (r) {
                if (Object.keys(r).length > 0) error.push({'message': 'Cette boisson existe déjà.'});
                returnAsync(error);
            });
        });
    }
    return error;
}
 
Repository.prototype.checkProvider = function(fournisseur) {
    var error = [];
    if (fournisseur) {
        this.__asyncProcess(function(returnAsync) {
            sql.query(mysql.format(req_brasseries_sel1, fournisseur)).done(function (r) {
                if (Object.keys(r).length > 0) error.push({'message': 'Ce fournisseur existe déjà.'});
                returnAsync(error);
            });
        });     
    }
    return error;
}
 
Repository.prototype.checkCategory = function(idCategorie, req) {
    var error = [];
    if (idCategorie == 0) error.push({'message': 'La catégorie est obligatoire.'});
    if (req.file) {
        var file =  req.file;
        if(file.size > 3000000) error.push({'message':'La taille maximale du logo est 3M.'});
        if(file.mimetype !== 'image/png' && file.mimetype !== 'image/jpg' && file.mimetype !== 'image/jpeg' && file.mimetype !== 'image/svg+xml') error.push({'message':'Les formats de logo supportés sont  jpeg, jpg, svg et png.'});
    }
    return error;
}
 
Repository.prototype.clean = function(req) {
    if (req.file) fs.unlink(req.file.destination + req.file.filename);
}

Puis, tu as un service que tu définis dessus:

Code:

1
2
3
4
5
6
7
// config/server/config/services.js
 
module.exports = {
    repository: {
        class: 'repository'
    }
};

Ensuite, tu définis une séquence qui va gérer ta synchronicité:

Code:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// config/server/config/services.js
 
module.exports = {
    addObject: {
        operations: [
            {
                order: 0,
                service: 'repository',
                method: 'checkName',
                arguments: ['@name@'],
                scope: 'errors.name'
            },
            {
                order: 0,
                service: 'repository',
                method: 'checkProvider',
                arguments: ['@fournisseur@'],
                scope: 'errors.provider'
            },
            {
                order: 0,
                service: 'repository',
                method: 'checkCategory',
                arguments: ['@idCategorie@', '!request!'],
                scope: 'errors.category'
            },
            {
                order: 1,
                service: 'danf:manipulation.callbackExecutor',
                method: 'execute',
                arguments: [
                    function(errors) {
                        var concatenedErrors = [];
 
                        for (var key in errors) {
                            concatenedErrors = concatenedErrors.concat(errors[key]);
                        }
 
                        return concatenedErrors;
                    },
                    '@errors@'
                ],
                scope: 'errors'
            },
            {
                order: 2,
                condition: function(stream) {
                    return stream.errors.length > 0;
                },
                service: 'repository',
                method: 'clean',
                arguments: ['!request!']
            }
        ]
    }
};

Ici, les opérations ayant le même "order" s'exécutent en parallèle, en série dans le bon ordre sinon.

Et enfin, tu peux brancher une route dessus:

Code:

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
// config/server/config/events/request.js
 
module.exports = {
    addObject: {
        path: '/add-object',
        methods: ['get', 'post'],
        view: {
            json: {
                value: {
                    error: '@errors@'
                }
            }
        },
        sequences: [
            {
                name: 'addObject',
                input: {
                    name: '@name@',
                    fournisseur: '@fournisseur@',
                    idCategorie: '@idCategorie@'
                },
                output: {
                    errors: '@errors@'
                }
            }
        ]
    }
};

En conclusion:
Oui il y a une petite (voire moyenne :D) phase d'apprentissage et ça parait à priori plus compliqué, mais ça permet de mieux découper et découpler les différents éléments et donc d'architecturer de grosses applications maintenables, évolutives et testables.

PS: Je n'ai pas testé ce code, donc je ne sais pas s'il est fonctionnel.