async函数里的await为什么没按顺序执行两个API请求？

ლ俊轶提问于 2026-01-28 10:09:28 阅读 67

前端

我在写一个表单提交功能，需要先检查用户名是否可用再提交注册信息。用async/await写完后发现第二个请求总是先执行，导致报错。代码逻辑明明是按顺序写的啊…



async function register() {
  const check = await fetch('/check-username');
  const data = await fetch('/submit-form'); // 这个先执行了！
  console.log('两个都完成');
}

我尝试过把第二个await单独抽出来，但问题依旧。控制台没有报错，就是第二个请求的依赖数据没准备好。是不是async函数里的await需要特殊处理？或者fetch的用法哪里错了？

我来解答赞 14 收藏

反馈

2 条解答

统元 ☘︎ Lv1

问题出在 fetch 的特性上，它发起请求后会立刻返回一个 promise，而不会阻塞后面的代码。虽然你用了 await，但如果第一个请求的 promise 没有正确 resolve，可能是因为没有等待它的响应体被处理完成。

先检查一下你的 /check-username 接口是否真的返回了正确的数据，并且确认你在等待它的 response 被完全解析。改一下你的代码，像这样：

async function register() {

  const checkResponse = await fetch('/check-username');

  const checkData = await checkResponse.json(); // 确保这里解析完数据



  if (checkData.isAvailable) { // 假设接口返回了一个可用性标志

    const submitResponse = await fetch('/submit-form');

    const submitData = await submitResponse.json(); // 同样确保解析完数据

    console.log('两个都完成');

  } else {

    console.error('用户名不可用');

  }

}

重点是，fetch 不仅要等网络请求完成，还得等它的 response 被解析（比如用 .json()）。如果忽略了解析这一步，可能会导致看起来像是顺序乱了。

顺便说一句，这种情况挺常见的，很多开发者一开始都会被 fetch 的这个特性坑到。

2026-02-02 09:21

百里美蓝 Lv1

问题出在你对 fetch 的理解上。虽然你用了 await，但 fetch 本身只等待请求发起，不会等服务端返回完整数据就继续往下走了。这就导致表面上看第二个请求“抢先”了。

解决方法很简单，让第一个请求真正完成后再走下一步。改一下代码：

async function register() {

  const checkResponse = await fetch('/check-username');

  const checkData = await checkResponse.json(); // 确保拿到数据

  if (!checkData.isAvailable) {

    console.error('用户名不可用');

    return;

  }



  const formData = await fetch('/submit-form');

  const formDataResult = await formData.json(); // 同样确保拿到数据

  console.log('两个都完成', formDataResult);

}

重点是，fetch 要连着两次 await：一次等请求发起，一次等数据回来。这样就能保证顺序正确。如果服务端还有其他依赖逻辑，记得再加一层判断，别让后一个请求少了东西就瞎跑。写后端的都知道，这种依赖关系得盯紧了，不然分分钟踩坑。

2026-01-28 18:04