如何使用 await-to-js 库优雅的处理 async await 错误

简介: 如何使用 await-to-js 库优雅的处理 async await 错误

通过阅读优秀的源码并从中学习如何写出让人觉得赏心悦目的代码最后再写文章进行总结对整个学习的过程进行一个梳理同时分享给其他人。

JS 异步编程进化之路

回调地狱阶段

在正式介绍 await-to-js 这个库之前,让我们先简单的回顾一下有关于在 JavaScript 这门语言中,异步编程的进化之路。在 Promise 没出现之前,异步编程一直是困扰着前端开发工程师的一个大难题,当时的前辈可能会经常看到下面这种代码。


function AsyncTask() {
   asyncFuncA(function(err, resultA){
      if(err) return cb(err);
      asyncFuncB(function(err, resultB){
         if(err) return cb(err);
          asyncFuncC(function(err, resultC){
               if(err) return cb(err);
               // And so it goes....
          });
      });
   });
}

这种同时在纵向和横向延伸的回调中嵌套着回调的代码又被称为回调地狱。可见这玩意让人多么恶心,具体来说有以下这几个缺点:


难以维护(看都不想看,还维护个**)

难以捕捉到错误(一个一个找?)    总而言之,这个问题在当时是很需要被解决的,所以在 ES6 中,出现了 Promise。

Promise 阶段

Promise 是一种优雅的异步编程解决方案。从语法上来将,它是一个对象,代表着一个异步操作最终完成或失败,从语意上来讲,它是承诺,承诺过一段时间给你一个结果。


由于它的原型存在 then,catch,finally 会返回一个新的 promise 所以可以允许我们链式调用,解决了传统的回调地狱的问题。


由于它本身存在 all 方法,所以可以支持多个并发请求,获取并发请求中数据。


有了 Promise 后,上面的代码可以被写成下面这样。


function asyncTask(cb) {
   asyncFuncA.then(AsyncFuncB)
      .then(AsyncFuncC)
      .then(AsyncFuncD)
      .then(data => cb(null, data)
      .catch(err => cb(err));
}

相比较于上面的回调地狱,使用 Promise 可以帮助我们让代码只在纵向发展,并且提供了处理错误的回调。显然优雅了很多。不过就算 Promise 已经这么优秀了,可是依然存在两个每种不足的地方:


不够同步(代码依然会纵向延伸)

不能给每一次异步操作都进行错误处理        这也就是为什么 ES7 中会出现 async / await,号称异步编程的最后解决方案的原因了。

async/await

async函数是Generator函数的语法糖。使用 关键字async来表示,在函数内部使用await来表示异步。相较于Generator,async函数的改进在于下面四点:


内置执行器。Generator函数的执行必须依靠执行器,而async函数自带执行器,调用方式跟普通函数的调用一样。

更好的语义。async和await相较于*和yield更加语义化。

更广的适用性。co模块约定,yield命令后面只能是 Thunk 函数或 Promise 对象。而async函数的await命令后面则可以是 Promise 或者 原始类型的值(Number,string,boolean,但这时等同于同步操作)。

返回值是 Promise。async函数返回值是 Promise 对象,比 Generator 函数返回的 Iterator 对象方便,可以直接使用then()方法进行调用。

有了 async/await,上面的代码可以被改写成下面这样:

function async asyncTask(cb) {
  const asyncFuncARes = await asyncFuncA()
  const asyncFuncBRes = await asyncFuncB(asyncFuncARes)
  const asyncFuncCRes = await asyncFuncC(asyncFuncBRes)
}

同时我们可以对每一次异步操作进行错误处理:


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)
    }
}

这样一来上面 Promise 存在的两个每种不足的地方是不是就被优化了呢?所以说 async/await 是 JS 中异步编写的最后解决方案我个人觉得一点问题没有,但是我不知道你看上面的代码,每一次异步操作都要用 try/catch 进行错误处理是不是感觉不够方便不够智能呢?

await-to-js-小而美的 npm 包

基本用法

作者是这样介绍这个库的:


Async await wrapper for easy error handling without try-catch。


中文翻译过来就是:


无需 try-catch 即可轻松处理错误的异步等待包装器。


这里做个简单的对比,之前我们在异步操作中处理错误的方法是这样的:



而用了 await-to-js 之后,我们可以这样的处理错误:


i

mport to from './to.js';
function async asyncTask() {
   const [err, asyncFuncARes]  = await to(asyncFuncA())
   if(err) throw new (error);
 
   const [err, asyncFuncBRes]  = await tp(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 这个自定义的错误文本,核心代码是这样的:


export function to(promise) {
    return promise
        .then((data) => [null, data]) // 成功,返回[null,响应结果]
        .catch((err) => {
            return [err, undefined]; // 失败,返回[错误信息,undefined]
    });
}

export default to;

可以看出,其代码的逻辑用中文解释是这样的


无论成功还是失败都返回一个数组,数组的第一项是和错误相关的,数组的第二项是和响结果相关的


成功的话数组第一项也就是错误信息为空,数组第二项也就是响应结果正常返回


失败的话数组第一项也就是错误信息为错误信息,数组第二项也就是响应结果返回 undefined


经过上面的分析我们可以认定,世界上没有什么黑魔法,没有你做不到,只有你想不到。


这里我们再来看函数 to 的第二个参数 errorExt 不难发现,这玩意其实就是拿来用户自定义错误信息的,通过Object.assign将正常返回的 error 和用户自定义和合并到一个对象里面供用户自己选择。


相关文章
|
3天前
|
数据可视化 前端开发 JavaScript
前端框架与库-D3.js数据可视化基础
【7月更文挑战第21天】D3.js是Web开发中创建动态、交互图表的利器,适用于从基础条形图到复杂地理热力图的广泛需求。核心概念涉及数据绑定至DOM,支持动态更新。初学者常遇难题包括不当数据绑定、选择器误用、过渡动画过量及坐标轴配置失误。避免策略需善用`.data()`, `.enter().append()`, `.exit().remove()`管理数据,熟知选择器差异,适度应用`.transition()`, 并精准设定坐标轴。示例条形图代码展示了数据绑定至`&lt;rect&gt;`元素的过程,奠定基础,助你进阶复杂项目。
|
10天前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
|
9天前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
13天前
|
前端开发 JavaScript 安全
JavaScript进阶-JavaScript库与框架简介
【7月更文挑战第11天】JavaScript库和框架加速Web开发,但也带来挑战。选择适合项目、团队技能的库或框架,如React、Angular、Vue,是关键。保持依赖更新,注意性能优化,避免过度依赖。遵循最佳实践,确保安全性,如防XSS和CSRF。学习基础,结合代码示例(如React计数器组件),提升开发效率和应用质量。
|
15天前
|
前端开发 JavaScript
JavaScript异步编程:Promise与async/await的深入探索
【7月更文挑战第9天】Promise和async/await是JavaScript中处理异步编程的两大利器。Promise为异步操作提供了统一的接口和链式调用的能力,而async/await则在此基础上进一步简化了异步代码的书写和阅读。掌握它们,将使我们能够更加高效地编写出清晰、健壮的异步JavaScript代码。
|
16天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的试题库管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的试题库管理系统附带文章源码部署视频讲解等
23 1
|
19天前
|
资源调度 JavaScript 前端开发
JavaScript进阶 - JavaScript库与框架简介
【7月更文挑战第5天】JavaScript库和框架构成了前端开发的核心,如jQuery简化DOM操作,Angular、React和Vue提供全面解决方案。选择时要明确需求,避免过度工程化和陡峭学习曲线。使用版本管理工具确保兼容性,持续学习以适应技术变化。示例展示了jQuery和React的简单应用。正确选择和使用这些工具,能提升开发效率并创造优秀Web应用。
|
19天前
|
JavaScript
js 捕获 await 的报错
js 捕获 await 的报错
11 1
|
22天前
|
前端开发 JavaScript
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
10 1
|
23天前
|
前端开发 JavaScript 定位技术
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
22 1