Portée des variables dans une requête

Version imprimable

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:

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:

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

La classe Map

Code:

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

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

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.

18/04/2019, 10h29
Watilin

Citation:

Envoyé par Loralina

- 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.

Citation:

- 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}] ?
18/04/2019, 12h14
Loralina

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

Citation:

Envoyé par Watilin

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.

Citation:

Envoyé par Watilin

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.