Comment rendre le fetch JavaScript synchrone ?

Question

Je utilise fetch pour obtenir des données json à partir d'une api. Ça fonctionne bien mais je dois l'utiliser de manière répétée pour différentes appels, donc cela doit être synchrone sinon j'ai besoin d'une autre manière de mettre à jour l'interface quand le fetch se termine 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); // vide ?

Y a-t-il un autre moyen d'y parvenir autre que d'utiliser fetch? (Je ne veux pas utiliser jquery de préférence).

Merci

Modifier

La question concerne l'api fetch, pas ajax, pas jquery, donc arrêtez de la marquer comme doublon de ces questions sans la lire correctement. Et si vous vous sentez quand même obligé de le faire, arrêtez de le relier à des questions et réponses datant de dix ans, beaucoup de choses changent en une décennie.

Answer 1

Vous voulez que votre fonction fetch retourne quelque chose :

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); //pas vide ! c'est {t,o,h,l,c}

---

Si vous voulez un peu de fantaisie ES7, vous pourriez 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);
})()