React JS中await Promise顺序异常 如何让请求按顺序执行

执行顺序不符合预期的核心问题是：resolveAfter2Seconds 函数虽然标记为 async，但内部没有返回 fetch 生成的 Promise 链。
函数执行时只会立刻发起fetch请求，不会把请求对应的Promise对象返回给调用方。此时 await resolveAfter2Seconds() 等待的是async函数默认生成的、同步代码执行完就立刻resolve的空Promise，根本不会等待内部fetch请求走完，自然会先输出second再输出first。

只需要给resolveAfter2Seconds内部的fetch链加上return，把需要等待的Promise暴露给调用方，await就能正确等待第一个请求全部执行完成后再走后续逻辑。
推荐统一用async/await写法减少then嵌套，修改后完整代码如下：

async function resolveAfter2Seconds() {
  // 关键：return 整个fetch Promise链，让await可以捕获到请求的执行状态
  return fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
    .then(json => {
      console.log('first'); 
    })
}

async function f1() {
  // 第二个请求逻辑
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  const json = await response.json()
  // 等待第一个请求执行完成
  await resolveAfter2Seconds();
  console.log('second'); 
}

const click = () => {
  f1();
}

return (
  <div className="App">
    <button onClick={click}>click</button>
    <h1>Hello CodeSandbox</h1>
    <h2>Start editing to see some magic happen!</h2>
  </div>
);

如果你习惯保留then链写法，不需要把f1改成async/await，只要给resolveAfter2Seconds里的fetch加上return，原有代码也能按预期顺序输出。核心逻辑永远是：要await某个异步操作，必须保证拿到这个异步操作对应的真实Promise对象。

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