web-dev-qa-db-ja.com

javascriptのフェッチを同期させる方法は？

APIからデータJSONを取得するためにフェッチを使用しています。正常に動作しますが、さまざまな呼び出しに繰り返し使用する必要があるため、同期する必要があります。または、各コンポーネントのフェッチが完了したときにインターフェイスを更新する方法が必要です。

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 ?

フェッチを使用する以外にそれを達成する他の方法はありますか？ （jqueryを優先的に使用したくない）。

ありがとう

編集

問題はfetch-apiであり、ajaxではなくjqueryであるため、適切に読まずにそれらの質問の重複としてマークするのをやめてください。それでもやむを得ない場合は、10年前の質問と回答へのリンクを停止してください。10年で大きく変わります。

javascriptjsonasynchronousfetch-api
10
Nabeel Khan

フェッチ関数がsthを返すようにします：

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);
    });    
}

現在、fetchDataにはpromiseが含まれており、簡単に使用できます。

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

おしゃれなES7が必要な場合は、次のように全体を書き直すことができます。

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