如何存储fetch请求响应至变量？为何代码陷入死循环？

先看你写的代码：

var Data;
fetch('url')
    .then(data => data.json())
    .then(success => Data = success);


while(typeof Data === 'undefined'){
  console.log("data not retrived")
}

根本原因：JavaScript的单线程事件循环 #

• JS是单线程运行的，代码分为同步任务和异步任务两类。
• fetch属于异步网络请求，它的then回调函数不会立刻执行，而是被放进异步任务队列排队，只有等主线程里所有同步任务都跑完了，才会去处理队列里的异步任务。
• 你的while循环是同步任务，它会一直霸占着主线程，反复检查Data有没有值。但主线程被这个循环占死了，异步队列里的then回调根本没机会执行，Data永远不会被赋值，循环自然停不下来，直接卡死。

正确的做法：用异步逻辑处理结果 #

别用同步循环等异步结果，直接在then里处理数据就行：

fetch('url')
    .then(data => data.json())
    .then(success => {
        // 在这里用拿到的数据做操作，比如渲染、计算
        console.log("数据拿到了：", success);
    })
    .catch(error => {
        // 别忘了处理请求失败的情况
        console.error("请求出错了：", error);
    });

或者用更直观的async/await写法：

async function getMyData() {
    try {
        const response = await fetch('url');
        const success = await response.json();
        // 在这里处理数据
        console.log("数据拿到了：", success);
    } catch (error) {
        console.error("请求出错了：", error);
    }
}

getMyData();

内容的提问来源于stack exchange，提问作者Emil Johansson Huzell