useEffect空依赖初始化时await axios.get()未生效顺序执行异常问题

问题根本原因 #

你遇到的不是await失效，是对async函数的执行逻辑、Promise链式调用的规则理解有误：

• 所有async函数执行时，只要碰到await关键字，会立刻返回一个pending状态的Promise，跳出当前async函数，继续执行函数外的后续同步代码
• Promise链式调用中，如果你在then的回调里返回了一个新的Promise，后续的then才会等待这个新Promise完成再执行；如果没有return，后续then会立刻执行，不会等待回调里的异步操作

第一段代码的问题

你在useEffect里直接同步调用getAgreements()和getFlag()：

useEffect(() => {
    getAgreements(); // Step 1
    getFlag(); // Step 2
}, []);

执行getAgreements()走到await axios.get(url)时，会立刻跳出getAgreements函数，返回pending的Promise，紧接着就执行下一行的getFlag()，所以两个请求会并行触发，自然不会等待第一个请求完成再跑第二个。

第二段.then链式代码的问题

你没有在第一个then的回调里返回getFlag()的Promise：

useEffect(() => {
    getAgreements()
    .then(() => {
        getFlag() // 这里没有return getFlag()返回的Promise
    })
    .then(() => {
        console.log('test'); // 不会等getFlag完成就执行
    })
}, []);

第一个then回调执行时调用了getFlag()，但没有把它返回的Promise往外抛，外层的Promise链不知道你这里还有异步操作，就直接进入下一个then执行console.log了。

正确写法（按顺序执行两个请求） #

写法1：内部自执行async函数（更易读）

useEffect(() => {
    // useEffect不能直接传async函数，会导致返回值是Promise而不是清理函数，所以在内部写自执行async
    const init = async () => {
        await getAgreements(); // 等待第一个请求完成
        await getFlag(); // 再执行第二个请求
        console.log('test'); // 两个请求都完成后才执行
    }
    init();
}, []);

写法2：正确的Promise链式调用

useEffect(() => {
    getAgreements()
    .then(() => {
        return getFlag(); // 必须return，让后续then等待这个Promise
    })
    .then(() => {
        console.log('test');
    })
}, []);
// 也可以简写为 getAgreements().then(getFlag).then(() => console.log('test'))

补充说明 #

如果你不需要两个请求按顺序执行，想并行请求提高效率，可以用Promise.all：

useEffect(() => {
    const init = async () => {
        await Promise.all([getAgreements(), getFlag()]);
        console.log('两个请求都完成了');
    }
    init();
}, []);

内容的提问来源于stack exchange，提问作者gene b.