如何让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，这将进行同步调用。

选项2

使用

async/await

，它在底层是异步的，但感觉它是同步的，请参阅 https://stackoverflow.com/a/54950884/2590616

选项3

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

这听起来像

fetch

+

Promise.all()

会很合适，请参阅 https://stackoverflow.com/a/52013616/2590616

选项4

如果您想在离开页面时发送分析数据或会话数据（例如在

onbeforeunload

中），并希望确保数据发送到服务器，而普通的异步 AJAX 调用无法保证这一点，您可以使用Beacon API 与 Navigator.sendBeacon().

Answer 2

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

Answer 3

嗨，这是 2023 年，我必须为我的特定场景进行同步 JS 获取。这是对我有用的代码：

const request = new XMLHttpRequest();
request.open("GET", "/bar/foo.txt", false); // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {
  console.log(request.responseText);
  return request.responseText;
}
return null;

Answer 4

您始终可以使用 xhr 的旧时尚方式。这是请求的示例。

   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML = this.responseText;
       }
     };

   xhttp.open("POST", "cookies.php", true);
   xhttp.send();

Answer 5

您只需添加回调函数作为参数即可。

function fetchOHLC(yUrl, callback){
    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;
        
            callback({t,o,h,l,c});
    
    })
    .catch(function(error) {
        console.log(error);
        callback(null, error);
    });    
}

fetchOHLC(yUrl, function(response, error){
    if (response == null) {
        console.log(error);
    } else {
        var fetchData = response;
        alert(fetchData);
    }
});

Answer 6

这就是我的实现方式，并且运行得非常好。这里真正的英雄是 JS fetch API。

var url = "http://excample.com/get/bytes"
var audio;
audio = $('audio');

fetch(url, {
    method: 'GET',
    headers: {
        'Authorization': 'Bearer ABCDEFGHIJKLMNO'
    }
}).then(response => {
    response.blob()
        .then(blob => {
            const objectUrl = URL.createObjectURL(blob);
            audio[0].src = objectUrl;
        }).catch(e => {
            console.error(e);
        })
}).catch(error => {
    console.error(error);
});

Answer 7

如果您来到这里是因为您将“如何使 javascript fetch 同步”放入搜索引擎：

这没有多大意义。执行网络操作不需要 CPU 工作，因此在

fetch(...)

期间阻止它没有什么意义。相反，请正确使用异步，如上面链接的duplicate所示。

---

如果您确实需要同步请求（您不需要），请使用已弃用的

XMLHttpRequest

同步变体，引用 MDN：

注意：从 Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27)、Blink 39.0 和 Edge 13 开始，主线程上的同步请求由于对用户体验产生负面影响而已被弃用。

const request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
request.send(null);

您可以在MDN上找到更多信息。