web-dev-qa-db-fra.com

Comment rendre javascript fetch synchrone?

J'utilise fetch pour obtenir des données json à partir d'une API. Fonctionne bien, mais je dois l'utiliser à plusieurs reprises pour divers appels, il doit donc être synchrone ou bien j'ai besoin d'un moyen de mettre à jour l'interface lorsque la récupération est terminée pour chaque composant.

function fetchOHLC(yUrl){
    fetch(yUrl)
    .then(response => response.json())
    .then(function(response) {
                alert(JSON.stringify(response.query));

            var t = response.created;
            var o = response.open;
            var h = response.high;
            var l = response.low;
            var c = response.close;

        return {t,o,h,l,c};

    })
    .catch(function(error) {
        console.log(error);
    });    
}

var fetchData = fetchOHLC(yUrl);
alert(fetchData); // empty ?

Existe-t-il un autre moyen d'y parvenir que d'utiliser la récupération? (Je ne veux pas utiliser jquery de préférence).

Merci

Modifier

La question concerne fetch-api, pas ajax, pas jquery, alors veuillez arrêter de le marquer comme doublon de ces questions sans le lire correctement. Et si vous vous sentez toujours obligé de le faire, veuillez cesser de le relier à des questions et réponses vieilles de dix ans, beaucoup de changements en une décennie.

javascriptjsonasynchronousfetch-api
10
Nabeel Khan

Vous voulez que votre fonction fetch retourne qc:

function fetchOHLC(yUrl){
    return fetch(yUrl)
    .then(response => response.json())
    .then(function(response) {
            alert(JSON.stringify(response.query));

        var t = response.created;
        var o = response.open;
        var h = response.high;
        var l = response.low;
        var c = response.close;

    return {t,o,h,l,c};

    })
    .catch(function(error) {
        console.log(error);
    });    
}

Maintenant, fetchData contient une promesse, qui peut être facilement utilisée:

var fetchData = fetchOHLC(yUrl);
fetchData.then(alert); //not empty ! its {t,o,h,l,c}

Si vous voulez un ES7 sophistiqué, vous pouvez réécrire le tout comme ceci:

async function fetchOHLC(yUrl){
  try{
    var r=JSON.parse(await fetch(yUrl))
    alert(JSON.stringify(r.query));
    return {t:r.created,o:r.open,h:r.high,l:r.low,c:r.close};
  }catch(e){console.log(e);}
}

(async function(){
  var fetchData = await fetchOHLC(yUrl);
  alert(fetchData);
})()
8
Jonas Wilms