使用Async/Await后日志顺序异常，如何让Fetch API同步执行？

问题根源 #

JavaScript是单线程模型，异步操作（比如Fetch网络请求）会被放入任务队列，等待所有同步任务执行完毕后才会处理。你用async/await封装了Fetch，但调用fetchData()时没有用await，所以它依然是异步执行，后面的console.log("Second Log")作为同步任务会优先完成，导致日志顺序不符合预期。

两种解决办法 #

方法一：用async函数包裹主逻辑，await Fetch调用

把需要按顺序执行的代码放到一个async函数里，用await等待fetchData()完成后再执行后续逻辑：

async function fetchData() {
    const response = await fetch('fetch_url', { method: 'GET' });
    return response.text();        
}

async function main() {
    // 等待请求完成拿到结果
    const response = await fetchData();
    console.log(response);
    // 请求完成后再执行后续日志
    console.log("Second Log");
}

main();

方法二：把后续逻辑放到then回调中

直接将需要在请求完成后执行的代码放在then回调里，确保顺序执行：

async function fetchData() {
    const response = await fetch('fetch_url', { method: 'GET' });
    return response.text();        
}

fetchData().then(response => {
    console.log(response);
    // 紧跟请求结果打印后续日志
    console.log("Second Log");
});

注意事项 #

JavaScript中不存在真正“同步执行”异步网络请求的方式——浏览器不允许主线程被长时间阻塞（会导致页面无响应）。上面的方法只是让代码逻辑按预期顺序执行，本质依然是异步，但能满足你的日志顺序需求。

内容的提问来源于stack exchange，提问作者pileup