Mettre la valeur de PromiseResult dans une variable

Version imprimable

Bonjour,
Je cherche mon erreur qui fait que je n'arrive pas à attribuer la valeur de [[PromiseResult]] à une variable ...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 async function getRaceId(nameRace) { var response = await fetch('http://zezo.org/races2.json'); var datas = await response.json(); //console.log(datas); for (var i = 0; i < datas.races.length; i++) { if (datas.races[i].name === nameRace) { return datas.races[i].id; } else {} } } var raceId = getRaceId("TJV ULTIM"); console.log(raceId);
getRaceId() me retourne ceci :
Code:

1 2 Promise*{<pending>}[[Prototype]]: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: "490.1"
je vois et je sais que "490.1" est bien la valeur que je souhaite obtenir donc jusqu'a preuve du contraire ça c'est ok (j'en doute maintenant ...)
Code:

1 2 3 var raceId = getRaceId("TJV ULTIM"); console.log(raceId); // <- Retourne undefined
Ou je me craque ? ça c'est la question que je me pose, un coup de pouce serait le bienvenu merci ;)

25/11/2021, 23h02
Toufik83

Bonjour,

Ce n'est pas possible de récupérer la valeur d'une fonction asynchrone avec une méthode synchrone, il faudrait utiliser le callback then() comme c'est montré dans cet exemple.

J'ai beau retourner le problème dans tous les sens, rien n'y fait ... j'arrive pas à "sortir" le 490.1 :weird:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
var raceId;
 
function getRaceId(nameRace) {
    return fetch('http://zezo.org/races2.json', {
        method: 'GET',
    })
    .then(function(response) {
        return response.json();
    })
    .then(function(datas) {
        for (var i = 0; i < datas.races.length; i++) {
            if (datas.races[i].name === nameRace) {
                raceId = datas.races[i].id;
            } else {}
        }
        console.log(raceId);
        return raceId;
    })
}
 
getRaceId("TJV ULTIM").then(raceId => {raceId;});

J'ai undefined et le console.log(raceId) me retourne bien 490.1.
C'est à s'arracher les cheveux ce truc ... :(

Bonjour,

Au lieu de stocker la valeur de la fonction getRaceId dans la variable raceId (qui n'est pas possible techniquement), essaies plutôt de mettre le traitement à l'intérieur de then comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function getRaceId(nameRace) {
    /* le return est inutile */
    fetch('http://zezo.org/races2.json', {
        method: 'GET',
    })
    .then(function(response) {
        return response.json();
    })
    .then(function(datas) {
        for (var i = 0; i < datas.races.length; i++) {
            if (datas.races[i].name === nameRace) {
                console.log(datas.races[i].id);
                /* c'est ici qu'il faut utiliser la valeur de datas.races[i].id et pas ailleurs !*/
            }
        }
 
        //return raceId; inutile de retourner ceci !
    })
}
 
//Puis tu fais appel à la fonction sans then, parce qu'il déjà géré par la fonction :
getRaceId("TJV ULTIM");

26/11/2021, 20h57
rlelamer

Ok mais je souhaite la récupérer et la stocker pour pouvoir la réutiliser donc je dois pas utiliser la bonne méthode alors ?
26/11/2021, 21h00
Toufik83

Montre comment tu veux la réutiliser, probablement on aura une solution...

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
 
function getRaceId(nameRace) {
    fetch('http://zezo.org/races2.json', {
            method: 'GET',
        })
        .then(function(response) {
            return response.json();
        })
        .then(function(datas) {
            for (var i = 0; i < datas.races.length; i++) {
                if (datas.races[i].name === nameRace) {
                    console.log(datas.races[i].id);
                }
            }
        })
    }
 
    function createCellPolar(value, el, row) {
        var cell = document.createElement('td');
        var raceId = getRaceId(el.race);
        var ltwa = el.twa.replace(/°/g,'').replace(/-/g,'').trim();
        var ltws = el.tws.replace(/kt/g,'').trim();
        var url = "http://toxcct.free.fr/polars/?race_id=" + raceId + "&tws=" + ltws + "&twa="+ ltwa + "&utm_source=RouteZezo.org";
        console.log(url);
        cell.innerHTML = '<a href="' + url + '" target="_blank" rel="noopener noreferrer" style="color: black">' + value + '</a>';
        cell.title = 'View in Toxcct\'s Polars';
        row.appendChild(cell);
    }

http://toxcct.free.fr/polars/?race_id=undefined&tws=9.0&twa=140&utm_source=RouteZezo.org

L'idée est d'appeler la fonction à l'intérieur de then comme ça :

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
 
function getRaceId(nameRace) {
    return fetch('http://zezo.org/races2.json', {
        method: 'GET',
    })
    .then(function(response) {
        return response.json();
    })
    .then(function(datas) {
        for (var i = 0; i < datas.races.length; i++) {
            if (datas.races[i].name === nameRace) {
                datas.races[i].id;
                //ici tu fais appel à createCellPolar avec les variables nécessaires
		createCellPolar("une valeur"
			,{"raceId":datas.races[i].id,"twa":"valeur de twa","tws":"valeur de tws"}
			,document.getElementById("table").querySelector('tbody').children[0]
		);
            }
        }
    });
}
function createCellPolar(value, el, row) {
        var cell = document.createElement('td');
        var raceId = el.raceId;//ici raceId au lieu de race
        var ltwa = el.twa.replace(/°/g,'').replace(/-/g,'').trim();
        var ltws = el.tws.replace(/kt/g,'').trim();
        var url = "http://toxcct.free.fr/polars/?race_id=" + raceId + "&tws=" + ltws + "&twa="+ ltwa + "&utm_source=RouteZezo.org";
        console.log(url);
        cell.innerHTML = '<a href="' + url + '" target="_blank" rel="noopener noreferrer" style="color: black">' + value + '</a>';
        cell.title = 'View in Toxcct\'s Polars';
        row.appendChild(cell);
    }
getRaceId("TJV ULTIM");

La ligne document.getElementById("table").querySelector('tbody').children[0] récupère le premier enfant du tbody de la table ayant l'id id="table".
Tu peux utiliser un id ou une classe pour faciliter la sélection sinon...

Bonjour,
en complément de ce qu'a écrit Toufik83, ce que tu cherches à faire c'est du synchrone, blocage du script en attendant la réponse, avec des fonctions asynchrones.

Avec un objet XMLHttpRequest on faisait
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 const URL = "http://zezo.org/races2.json"; function getDatas(filtre) { const xhr = new XMLHttpRequest(); // mode synchrone activé xhr.open("GET", URL, false); xhr.send(null); // traitement retour const dataJson = JSON.parse(xhr.responseText); const result = dataJson.races.filter(value => value.name == filtre); return result[0].id; } const recupId = getDatas("TJV ULTIM"); // la suite du code console.log("getDatas", recupId);
méthode bloquante faisant partie des mauvaises pratiques, mais qui fonctionne.

Avec les promises le retour n'est autre qu'une promise et ce que tu utilises la voie asyn/wait ou then, le résultat est le même
Que tu fasses, j'ai modifié la récupération de la valeur :
Code:

1 2 3 4 5 6 async function getDonnees(filtre) { const response = await fetch('http://zezo.org/races2.json'); const dataJson = await response.json(); const result = dataJson.races.filter(value => value.name == filtre); return result; }
ou
Code:

1 2 3 4 5 6 7 8 function getDonnees(filtre) { fetch('http://zezo.org/races2.json') .then(response => response.json()) .then(dataJson => { const result = dataJson.races.filter(value => value.name == filtre); return result; }) }
L'exploitation ce fera de la façon suivante :
Code:

1 2 3 4 getDonnees("TJV ULTIM") .then((datas) => { // ici on peut traiter les données reçues });
Comme expliqué avant, l'utilisation d'une fonction « callback » simplifie le code et sa lisibilté.

Cela pourrait ressembler au schéma suivant :
Une fonction de traitement :
Code:

1 2 3 4 5 // la fonction de traitement function traiteDonnees(param, datas) { console.log("traiteDonnees :", JSON.stringify(datas, null, 2)); // là tu mets le code que tu veux ! }
Une fonction de requête :
Code:

1 2 3 4 5 6 7 8 9 // la fonction requête function getDonnees(filtre, callback) { fetch('http://zezo.org/races2.json') .then(response => response.json()) .then(dataJson => { const result = dataJson.races.filter(value => value.name == filtre); callback(filtre, result); }) }
et la fonction d'appel :
Code:

1 2 // appel de la fonction getDonnees("TJV ULTIM", traiteDonnees);
Je rajoutes que comme tu récupérés toutes les données d'un coup, cela vaut sûrement le coup de les « mettre en cache » si tu dois utiliser un autre filtre.

[Edit] légère correction des codes

30/11/2021, 21h48
rlelamer

Merci à vous 2
Je vais tenter de mettre ça en application (et je rame sérieux ...)