React中useEffect内async/await执行顺序不符预期如何解决？

你的代码出现顺序不符合预期的原因是：ab 是异步函数，调用 ab() 时会先同步执行 console.log("start API")，遇到 await callAPI() 后函数暂停并让出执行权，此时 useEffect 里的 console.log("calling") 会立刻执行。等 callAPI 的异步操作完成后，才会继续执行 ab 里的 console.log("end API")。

要实现 start API → end API → calling 的顺序，你需要在 useEffect 中等待 ab() 执行完成，具体有两种写法：

写法一：将useEffect回调改为async函数并await ab() #

const ab = async () => {
    console.log("start API");
    await callAPI();
    console.log("end API");
};

useEffect(async () => {
    await ab();
    console.log("calling");
}, []);

写法二：在useEffect内部定义异步函数并执行（更推荐，便于后续添加清理逻辑） #

const ab = async () => {
    console.log("start API");
    await callAPI();
    console.log("end API");
};

useEffect(() => {
    const runTasks = async () => {
        await ab();
        console.log("calling");
    };
    runTasks();
}, []);

两种写法的核心都是通过 await 等待 ab() 返回的Promise完成，确保 console.log("calling") 在 ab 的所有逻辑执行完毕后才触发。

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