一、Async 函数的错误处理
async 函数的语法不难，难在错误处理上。先来看下面的例子：
我们可以看到 Promise 报错后，a = await 1 并没有被执行。即当 async 函数中只要一个 await 出现 reject 状态，则后面的 await 都不会被执行。
解决办法是：可以添加 try catch。
// 正确的写法
let a; async function correct() { try { await Promise.reject('error') } catch (error) { console.log(error); } a = await 1; return a; } correct().then(v => console.log(a));
这样就会先打印 error，再打印 1。因此，如果有多个 await 则可以将其都放在 try/catch 中，但很显然，这样并不优雅。
// 我们需要对每一次异步操作进行错误处理
function async asyncTask(cb) { try { const asyncFuncARes = await asyncFuncA() } catch(error) { return new Error(error) } try { const asyncFuncBRes = await asyncFuncB(asyncFuncARes) } catch(error) { return new Error(error) } try { const asyncFuncCRes = await asyncFuncC(asyncFuncBRes) } catch(error) { return new Error(error) } }
二、npm包：await-to-js 及源码分析
作者是这样介绍这个库的：Async await wrapper for easy error handling without try-catch。中文翻译过来就是：无需 try-catch 即可轻松处理错误的异步等待包装器。
与上面对比，使用了await-to-js之后，我们可以这样的处理错误：
import to from './to.js'; function async asyncTask() { const [err, asyncFuncARes] = await to(asyncFuncA()) if(err) throw new (error); const [err, asyncFuncBRes] = await to(asyncFuncB(asyncFuncARes)) if(err) throw new (error); const [err, asyncFuncCRes] = await to(asyncFuncC(asyncFuncBRes) if(err) throw new (error); }
简洁多了，看看源码，没写想到只有 15 行，完全都可以自己作为一个公共方法使用即可。
export function to<T, U = Error> ( promise: Promise<T>, errorExt?: object ): Promise<[U, undefined] | [null, T]> { return promise .then<[null, T]>((data: T) => [null, data]) .catch<[U, undefined]>((err: U) => { if (errorExt) { const parsedError = Object.assign({}, err, errorExt); return [parsedError, undefined]; } return [err, undefined]; }); } export default to;
上面是TS版的源码，但是考虑到有些同学可能还没接触过TS，我着重分析一下下面这版JS版的源码。
export function to(promise, errorExt) { return promise .then((data) => [null, data]) .catch((err) => { if (errorExt) { const parsedError = Object.assign({}, err, errorExt); return [parsedError, undefined]; } return [err, undefined]; }); } export default to;
这里我们先抛开 errorExt 这个自定义的错误文本，可以看出：其代码的逻辑用中文解释是这样的：
- 无论成功还是失败，都返回一个数组，数组的第一项是和错误相关的，数组的第二项是和响结果相关的
- 成功的话，数组第一项也就是错误信息为空，数组第二项也就是响应结果正常返回
- 失败的话，数组第一项也就是错误信息为错误信息，数组第二项也就是响应结果返回undefined
经过上面的分析发现：其实挺简单的，但是，又确实挺巧妙的，我们也并不是做不到，而不是想不到。
这里我们再来看函数 to 的第二个参数 errorExt，不难发现这其实就是拿来用户自定义错误信息的，通过 Object.assign 将正常返回的 error 和用户自定义的，合并到一个对象里面供用户自己选择。