Discussion :

[LO88ra]

Bonsoir,

J'ai un soucis au niveau de la portée d'une variable dans une requête au niveau de mon callback. Est-ce que quelqu'un pourrait jeter un oeil ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
static getData(url, callback) {
        let rep;
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true); // 
        xhr.send(null);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                callback(rep = JSON.parse(xhr.responseText));
            }
            else {
                console.log('chargement...');
            }
        }
    }

Code :

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

Ajax.getData(url,  () => { map.createMarker() });

La classe Map

Code :

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

1
2
createMarker() {
        for (var info of rep) { ..... // ReferenceError: rep is not defined

[Loralina]

Bonjour,
"rep" est local à la fonction.
Il faudrait le définir en dehors ou le passer en paramètre comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
static getData(url, callback) {
		const xhr = new XMLHttpRequest();
		xhr.open('GET', url, true);
		xhr.send(null);
		xhr.onreadystatechange = function () {
			if (this.readyState === 4) {
				callback(JSON.parse(this.responseText));
			}
			else {
				console.log('chargement...');
			}
		}
	}
 
Ajax.getData(url,  (rep) => { map.createMarker(rep); });

Remarques :
- J'en ai profité pour remplacer "xhr" par "this" dans la fonction "onreadystatechange".
- Pour la fonction "callback", il y aurait des variantes possibles permettant d'avoir "map" pour valeur de "this" dans la fonction "createMarker" en utilisant call, apply ou bind.
- for (var info of rep) pourrait ne pas fonctionner selon ce que vaut "rep" :
Si rep=[{a:1},{b:2}], cela fonctionnera, mais pas si rep={a:1}, voir ici.

[Watilin]

- J'en ai profité pour remplacer "xhr" par "this" dans la fonction "onreadystatechange".

Petite réflexion méta. Le this de JS est capricieux, il change selon la façon dont on invoque la fonction, et on peut même le changer explicitement avec call, apply ou bind comme tu l’as si justement fait remarquer.
Pour ces raisons, certains développeurs et certaines développeuses font le choix de ne jamais utiliser this en JS. Je sais que ça part d’une bonne intention, mais réintroduire des this dans un code qui n’en a pas, ce n’est pas une amélioration, c’est une surcorrection. Dans le doute, il eût été préférable de s’en tenir au style choisi par LO88ra.

- for (var info of rep) pourrait ne pas fonctionner selon ce que vaut "rep" :
Si rep=[{a:1},{b:2}], cela fonctionnera, mais pas si rep={a:1}

Et pourquoi pas rep = [{a:1}] ?

[Loralina]

Bonjour,
Je ne suis pas de cet avis pour this.

Dans le doute, il eût été préférable de s’en tenir au style choisi par LO88ra.

C'est relativement acceptable dans la mesure où elle utilise une constante.
Mais dans le cas d'une variable, il est mieux de ne pas dépendre d'une variable externe qui peut avoir été modifiée dans la suite du code et pointer sur tout autre chose, éventuellement un autre XMLHttpRequest.
Après, il ne s'agirait pas de coder différemment selon qu'on utilise une variable ou une constante.
Autant utiliser event.target si on ne veut pas utiliser this.

Et pourquoi pas rep = [{a:1}] ?

Si rep=[{a:1}], donc un Array, la boucle for of passera (à la différence de si rep={a:1}).
Oui et alors ?
J'attire simplement son attention sur le fait qu'il pourra y avoir un problème avec sa boucle en l'état selon le json.