【源码学习】第18期 | 除了try catch原来还能这样优雅地捕获 await 的错误！

• 本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。
• 第21期 | await-to-js 如何优雅的捕获 await 的错误

前言

    日常开发中相信大家或多或少会使用异步函数，那么异步函数应该如何优雅地捕获错误呢？如果跟我一样只会 try catch 的话就一起来学习一下 await-to-js 的用法跟源码吧！划重点：源码加上注释才22行！

收获清单

• 优雅地捕获await 的错误
• 调试源码

await-to-js应用

简介

    官方简介如下，大意就是异步等待包装器，方便错误处理

使用

    老规矩，使用方法看 readme。这时候可能有人会说了，我用着try catch好好的，为啥还要引入个库来捕捉错误，选它的理由是啥？正所谓没有对比就没有伤害，咱们来对比一下两者的使用

try-catch捕捉错误

const getData = async ()=>{

  try {

    const data1 = await fn1()

  } catch (error) {

    console.log(error)

  }

  try {

    const data2 = await fn2()

  } catch (error) {

    console.log(error)

  }

  try {

    const data3 = await fn3()

  } catch (error) {

    console.log(error)

  }

}

await-to-js捕获错误

import to from 'await-to-js';

const awaitGetData = async()=>{

  const [err1,data1] = to(Promise)

  if(err1) throw new (error);

  const [err2,data2] = to(Promise)

  if(err2) throw new (error);

  const [err3,data3] = to(Promise)

  if(err3) throw new (error);

}

    对比下来可以知道await-to-js会直接把错误返回，代码上也更为简洁~

代码准备

下载代码

git clone https://github.com/scopsy/await-to-js.git
cd await-to-js
npm install

代码分析

调试代码

开启调试的作用是在单步调试中跟着作者的思路走，这里的test命令跑测试用例，可以提前在test.ts函数打上断点（如图二）~

源码分析

/**

 * @param { Promise } promise

 * @param { Object= } errorExt - Additional Information you can pass to the err object

 * @return { Promise }

 */
// 参数promise处理函数，类型为promise的泛型；errorExt为返回错误的附加参数，选传、类型为对象
export function to<T, U = Error> (

  promise: Promise<T>,

  errorExt?: object
// 返回值为捕获的错误error或者处理成功后的data
): Promise<[U, undefined] | [null, T]> {

  return promise

    .then<[null, T]>((data: T) => [null, data])

    .catch<[U, undefined]>((err: U) => {
   // 若有附加参数，利用Object.assign将其跟捕获的错误复制到同一个对象中
      if (errorExt) {

        const parsedError = Object.assign({}, err, errorExt);

        return [parsedError, undefined];

      }

      return [err, undefined];

    });

}
export default to;

总结

    今天学习了一下await-to-js的使用，调试分析了await-to-js的源码，其中await-to-js主要是利用promise的catch捕获错误，其完整的测试用例跟容错处理是值得我们日常开发中借鉴的。最后总结一下学习源码，简言之就是选择自己想了解的源码然后静下心来一步步分析，当然最重要的还是得带着求知欲迈出第一步，遇到不懂的自己查阅资料，把自己查阅资料查漏补缺的过程转换成文字记录下来，宁静致远！最后的最后写完了别忘了给自己点个赞啊~