如何使javascript fetch同步？

Question

我正在使用fetch从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 ?

除了使用fetch之外,还有其他方法可以实现吗？(我不想优先使用jquery).

谢谢

编辑

问题是关于fetch-api,而不是ajax,而不是jquery,所以请不要在没有正确阅读的情况下将其标记为重复这些问题.如果您仍然觉得有必要这样做,请停止将其与十年前的问题和答案联系起来,十年后会发生很多变化.

Answer 1

fetch仅用于异步调用，但有一些选项：

选项1

如果XMLHttpRequest也可以，那么您可以使用async: false，这将执行同步调用。

但自 2014 年以来，whatwg 规范中就出现了弃用警告，并且一些浏览器已经在开发工具中抱怨。因此可以假设它迟早将不再起作用。

选项2

使用async/await它在底层是异步的，但感觉它是同步的，请参阅/sf/answers/3846561911/

选项3

否则，当每个组件的获取完成时，我需要某种方法来更新界面

这听起来像fetch+Promise.all()很合适，请参阅/sf/answers/3640953151/

选项4

如果您想在离开页面时发送分析数据或会话数据（例如在 中onbeforeunload），并希望确保数据发送到服务器，而普通的异步 AJAX 调用无法保证这一点，您可以使用Beacon API Navigator.sendBeacon()。

Answer 2

你希望你的fetch函数返回:

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

Answer 3

如果您不想使用 fetch api，则必须使用回调、事件侦听器、XMLHttpRequest。