如何等待async异步函数执行结束后再执行后续代码

核心是把zoho_oAuth改造为返回Promise的异步函数，调用时通过await或者then等待Promise完成后再执行后续逻辑。

步骤1：修改原函数 #

你现在注释掉了外层的Promise返回逻辑，把注释打开并关联内部的异步轮询逻辑即可：

zohoAuth.zoho_oAuth = function () {
    return new Promise((resolve, reject) => {
        zohoAuth.state = utils.uuid();
        const url = zohoAuth.authorizationURL();
        zohoAuth.popUp(url);

        // 等待授权状态轮询完成后再resolve外层Promise
        getAuthCodeFromCatalyst()
            .then(() => {
                console.log("bottom of zoho auth")
                resolve(true);
            })
            .catch(err => reject(err)); // 可按需添加错误捕获逻辑

        function getAuthCodeFromCatalyst() {
            return new Promise(function (resolve, reject) {
                (async function waitForFoo() {
                    const gotAuthState = await zohoAuth.getUserDataFromStorageState(zohoAuth.state)
                    if (gotAuthState) return resolve();
                    setTimeout(waitForFoo, 1000);
                })();
            });
        }
    });
}

注：原代码中await gotAuthState是冗余逻辑，gotAuthState已经是上一步await返回的结果，无需重复await。

步骤2：修改调用方式 #

两种常用写法按需选择：

写法1：async/await（更易读） #

将调用逻辑放在async作用域内，用await等待函数执行完成：

async function mainFlow() {
    try {
        await zohoAuth.zoho_oAuth();
        console.log("done waiting");
        // 后续需要等待的逻辑都放在这里
    } catch (err) {
        // 处理授权过程中的异常
        console.error('授权失败', err);
    }
}
mainFlow();

写法2：Promise.then链式调用 #

zohoAuth.zoho_oAuth()
    .then(() => {
        console.log("done waiting");
        // 后续需要等待的逻辑都放在这里
    })
    .catch(err => {
        // 处理授权过程中的异常
        console.error('授权失败', err);
    });

原理说明 #

你之前的代码中zoho_oAuth是同步返回true，内部的轮询请求还没执行完成，函数就已经返回了，因此无法等待。改造后函数返回一个Promise，只有当轮询拿到授权状态后才会将Promise状态改为已完成，此时调用侧的await或者then才会触发后续逻辑。

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