async/await: await 后面的 Promise 出错的解决方法

前言

Promise 是 ES6 引入的一个新的语言特性，解决了回调地狱的问题，但是他没有完全解决异步编程的问题，因为 Promise 仍然需要通过回调地狱来解决链式调用的问题。而 async/await 则是更加优雅的解决异步编程的方法，可以让代码更为简洁易懂，但是也存在一些问题，比如 await 后面的 Promise 出错会导致程序崩溃。下面就让我们来看一下该问题及其解决方法。

问题分析

在使用 async/await 的时候，如果 await 后面的 Promise 出错了，那么程序将会抛出异常，并且不会进入该 Promise 的 catch 函数，使得我们无法通过 catch 函数来捕获异常信息，这样就导致了程序崩溃的问题。

解决方法

使用 try...catch 结构

因为 await 后面的 Promise 出错无法通过 catch 函数来捕获，而是直接抛出异常，所以我们可以使用 try...catch 结构来包裹该语句，以便我们能够捕获异常信息，代码如下：

async function test(){
    try{
        await promise; //promise 为错误的 Promise
    }catch(err){
        console.error(err); //处理异常
    }
}

使用 Promise 的 catch 方法

另一种方法就是在 Promise 后面使用 catch 方法来处理错误，代码如下：

async function test(){
    promise.catch(err => {
        console.error(err); //处理异常
    });

    //其他代码
}

上述代码当错误发生的时候，错误信息会被 catch 方法捕获到，并作出处理。

总结

在使用 async/await 的时候，await 后面的 Promise 出错是一个需要注意的问题。我们可以使用 try...catch 结构或者使用 Promise 的 catch 方法来捕获异常信息，从而避免程序崩溃的情况。值得注意的是，使用 try...catch 结构的话，需要确保使用了 async 关键字来声明函数，否则无法捕获到异常信息。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ac8aa968c7c53b0a45118