Async/Await在Fetch API函数中无法正常工作的问题排查求助

你的问题出在对async函数的执行逻辑理解偏差上：async函数本身会返回一个Promise对象，当你直接调用const a = postData(payload)而不用await或者.then()去等待它完成时，主线程不会停下来等这个异步函数执行完毕，而是会继续往下走，这就导致了输出顺序混乱。

具体的执行流程是这样的：

• 调用postData(payload)，函数开始执行，先打印first step；
• 遇到await fetch(...)，此时函数会暂停执行，立即返回一个pending状态的Promise给变量a；
• 主线程不受异步函数暂停的影响，继续执行后面的console.log('fourth step ', a)，所以这行代码会先于second step和third step打印；
• 等fetch请求完成后，postData函数恢复执行，依次打印second step、third step，最后把data作为Promise的resolve值返回。

有两种常见的方式可以让代码按照你预期的顺序执行：

方案一：在async环境中用await等待结果 #

你需要把调用postData的代码放在另一个async函数里，用await等待它执行完成：

// 假设payload已经定义
async function init() {
  const a = await postData(payload);
  console.log('fourth step ', a);
}

init();

方案二：用.then()处理Promise的返回值 #

如果你不想额外套一个async函数，可以直接用Promise的.then()方法来处理结果：

const a = postData(payload);
a.then(data => {
  console.log('fourth step ', data);
});

这两种方式都能保证fourth step在third step之后打印，因为它们都正确等待了postData内部的异步操作完成。

另外，你的response.json().then(data => data.response)这部分可以简化成更简洁的写法：

const { response: data } = await response.json();

这样代码可读性会更高。

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