JavaScript 异步/等待策略，函数提前解析/等待不等待

Question

我一直对这个概念的解释有点好奇。 我知道我只是误解了这一点。 下面是 2 个函数，第一个函数是为了等待另一个函数完成，然后才能解析为 true 或 false，但第二个函数会提前解析为 undefined。

async function authorizeAccount() {
        if (await authHandler.onLogin()) {
                <!-- removed for brevity -->
        }
        else {
            alert("Something went wrong during authorization. Try again.")
        }
    }
    
    async onLogin() {
        try {
            const result = await authorize(this.spotifyAuthConfig);
            if (result.authorizationCode) {
                axios.get('http://10.0.2.2:8000/authorizespotify/' +        result.authorizationCode)
                    .then((result) => {
                        //Set token expiration date time
                        result.data.tokenExpirationDate = Date.now() + (result.data.expires_in * 1000);
                        asyncStorageHandler.storeObject('tokenObject', result);
                        return true;
                    })
            }
            else {
                return false;
            }

        } catch (error) {
            return false;
        }
    }

有人可以解释为什么这个函数 onLogin 立即解析导致 if 语句解析“未定义”吗？ 为什么以下相同功能的早期版本有效？显然，我们在这里等到 onLogin 函数解析为 true/false，然后再继续使用 authorizeAccount 函数。

async onLogin() {
        try {
            const result = await authorize(this.spotifyAuthConfig);
            if (result.accessToken) {
                await asyncStorageHandler.storeObject('tokenObject', result);
                return true;
            }
            else {
                return false;
            }

        } catch (error) {
        }
    }

我应该提一下，在新版本中，所有代码都运行了，我得到了令牌等，最终返回 true，但问题是此时承诺已经解决。那么我该如何规避这种行为呢？

Answer 1

有人可以解释为什么这个函数 onLogin 立即解析导致“未定义”

因为您没有使用await 或类似方法来等待来自axios 调用（更准确地说，来自您的then 处理程序）的承诺完成。没有任何东西将来自axios.get().then() 的承诺与onLoad 隐式创建的承诺联系起来，因此后者不会等待前者解决。

为什么相同功能的以下早期版本有效？

因为它没有axios 调用，并且确实在我认为是异步操作（给定名称asyncStorageHandler）上有await。 :-)

绝对最小的改变是添加一个return，我在下面标记了***，但你也没有等待asyncStorageHandler的承诺，所以我已经也标记了这一点：

// >>> I do NOT recommend mixing things this way, keep reading <<<
async function authorizeAccount() {
    if (await authHandler.onLogin()) {
            <!-- removed for brevity -->
    }
    else {
        alert("Something went wrong during authorization. Try again.")
    }
}

async onLogin() {
    try {
        const result = await authorize(this.spotifyAuthConfig);
        if (result.authorizationCode) {
            return axios.get('http://10.0.2.2:8000/authorizespotify/' +        result.authorizationCode)
// *** −−−−−^^^^^^
                .then((result) => {
                    //Set token expiration date time
                    result.data.tokenExpirationDate = Date.now() + (result.data.expires_in * 1000);
                    return asyncStorageHandler.storeObject('tokenObject', result);
// *** −−−−−−−−−−−−−^^^^^^
                })
                .then(() => {    // *** Broke this out into its own
                    return true; // handler since we need to wait
                })               // for `asyncStorageHandler.storeObject`
        }
        else {
            return false;
        }

    } catch (error) {
        return false;
    }
}

这使得来自async 函数的promise 解析为来自axios.get().then() 的promise，所以最终来自axios.get().then() 的promise 会发生在来自async 函数的promise 上。没有那个return，没有任何东西可以将async函数的promise与axios.get().then()的promise联系起来。

但总的来说，最好不要混合使用await 和.then 处理程序（尽管偶尔会有例外）：

async function authorizeAccount() {
    if (await authHandler.onLogin()) {
            <!-- removed for brevity -->
    }
    else {
        alert("Something went wrong during authorization. Try again.")
    }
}

async onLogin() {
    try {
        const result = await authorize(this.spotifyAuthConfig);
        if (result.authorizationCode) {
            const tokenResult = await axios.get('http://10.0.2.2:8000/authorizespotify/' +        result.authorizationCode)
// −−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^
            tokenResult.data.tokenExpirationDate = Date.now() + (tokenResult.data.expires_in * 1000); // *** changed result to tokenResult
            await asyncStorageHandler.storeObject('tokenObject', tokenResult);                              // *** "
            return true;
        }
        else {
            return false;
        }

    } catch (error) {
        return false;
    }
}

或者当然，根本不使用async函数，只使用.then等：

onLogin() {
    return authorize(this.spotifyAuthConfig)
    .then(result => {
        if (result.authorizationCode) {
            return axios.get('http://10.0.2.2:8000/authorizespotify/' + result.authorizationCode)
            .then(tokenResult => {
                tokenResult.data.tokenExpirationDate = Date.now() + (tokenResult.data.expires_in * 1000);
                return asyncStorageHandler.storeObject('tokenObject', tokenResult);
            })
            .then(() => {
                return true;
            });
        }
        else {
            return false;
        }
    })
    .catch(error => {
        return false;
    });
}

...但是我们有async/await 的原因是使用这样的显式处理程序会变得很麻烦。