链式调用三个async函数时fetchIt早于pairs执行，是什么原因？

.then()方法要求传入函数引用作为回调，等待前序Promise状态变为resolved后才会执行这个回调。你当前的写法直接在.then()中写了pairs()、fetchIt()，属于同步调用函数，JS会在初始化Promise链式结构的时候就立刻执行这两个函数，不会等待前一个异步任务完成，自然会出现执行顺序不符合预期的问题。

两种常用写法可选：

方案1：调整.then参数格式 #

把.then()的入参改为函数引用即可：

useEffect(() => {
    getSet()
      .then(pairs) // 无参数需求可直接传函数名，有自定义参数可写成 .then(() => pairs(参数))
      .then(fetchIt)
      .then(() => {
        setLoading(false);
      });
  }, []);

方案2：使用async/await语法，代码可读性更高 #

useEffect的回调不能直接标记为async，可以用立即执行异步函数包裹：

useEffect(() => {
  (async () => {
    await getSet()
    await pairs()
    await fetchIt()
    setLoading(false)
  })()
}, []);

额外提示：如果你的异步函数内部用到了前序函数setState更新后的状态，需要注意React的setState是批量异步更新的，仅靠async/await等待函数执行完成不一定能拿到最新状态，这种情况可以把依赖的状态通过函数返回值传递，或者用useRef存储可变值来处理。

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