当前位置:首页 > 技术分析 > 正文内容

停止像这样使用 "async/await",改用原版

ruisui883个月前 (02-14)技术分析17

最近我看到一些开发者使用这种方法来处理 async/await 错误。

/**
 * @param { Promise } promise
 * @param { Object= } errorExt - Additional Information you can pass to the err object
 * @return { Promise }
 */
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];
    });
}

async function doSomething() {
  const [error1, result1] = await to(fetch(''));
  if (error1) {
    return;
  }

  const [error2, result2] = await to(fetch(result1));
  if (error2) {
    return;
  }
  // ...
}

正如你所看到的,他们把函数包起来,把原来的Promise转换成一个肯定会成功的 "Promise",并返回一个数组。

如果原始的Promise成功了,那么数组中的第一项是空的,表示没有错误,第二项是原始 Promise的结果。如果原来的Promise失败了,那么数组的第一项是错误,第二项是未定义。就是这样了。

他们认为这很优雅,使代码更易读。但我不这么认为,我也不建议这样使用它

我认为这样的封装有点过度,在大多数情况下,不需要这样做。接下来,我将从两个角度说明我的观点。

1. 从设计的角度来看

Async/await API的目的是允许开发者像写同步代码一样写异步代码。因此,可以使用try...catch来捕获async/await错误。

而这样的函数似乎为我们考虑到了一切,但其他刚看到你的代码的开发者总会有这样的疑问。为什么to函数返回的Promise所使用的await没有用try...catch来包装?

只有找到原始的to函数定义,并理解其意图,你才能知道 "啊,原来to函数返回的 Promise 永远不会被拒绝"。

所以它进一步增加了其他开发者的理解成本,使得熟悉的 async/await 变得不再 "熟悉"。

2. 从实用性的角度来看

to函数的主要使用情况是,在同一上下文中有多个await promises,而它们相应的错误处理方式是不同的。那么就使用这个封装函数对每个错误进行不同的处理,减少对try...catch的使用。

但在实际开发,在每个到函数之后,你需要使用if语句来确定是否有错误。这与使用try...catch的本意没有什么不同,都是为了检查错误。

其次,在真实的生产环境中,下一个Promise依赖上一个Promise的情况并不少见。但重要的一点是,这两个Promise通常是关联函数。所以在外层使用try...catch来统一处理错误是没有问题的。比如说

最后,在JavaScript中,大多数Promise场景都是在 Input/output上,比如网络IO和文件IO。这些IO场景可以将拦截器封装在下层,并根据错误代码统一处理。例如,使用axios拦截器。

所以它可能并不像预期的那样实用。也就是说,它可能只用于整个项目的一小部分,而且成本超过了收益。

这就是我所有的观点,你怎么看?你赞成这种做法吗?

作者:Marina Mosti 译者:前端小智 来源:medium 原文:
https://blog.bitsrc.io/stop-using-async-await-like-this-use-the-original-instead-172b5df17589

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/1970.html

标签: aysnc
分享给朋友:

“停止像这样使用 "async/await",改用原版” 的相关文章

「2022」打算跳槽涨薪,必问面试题及答案——VUE篇

1、为什么选择VUE,解决了什么问题?vue.js 正如官网所说的,是一套构建用户界面的渐进式框架。与其它重量级框架不同的是,vue 被设计为可以自底向上逐层应用。vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另外一方面,当与现代化工具链以及各种支持类库结合使用时,vu...

代码管理-9-gitlab的使用和设置

gitlab使用1、外观设置完成后保存,返回登录页面查看关于注册,有些公司是不允许打开的,,有些人数非常多的公司就需要打开注册的功能,让人员自己注册,我们来给他特定的权限就可以,毕竟人非常多的时候还由我们来给她们注册就非常不现实了,工作量会很大2、自动注册3、组&用户&项目创建组设置组名称、描述等创...

10分钟搞定gitlab-ci自动化部署

gitlab-ci 是持续集成工具/自动化部署工具,类似 jenkins。持续集成 是将代码集成到共享存储库并尽可能早地自动构建/测试每个更改的实践 - 通常一天几次。概述在编码完成时都会进行打包发布过程,如果每次都手动操作这一步骤就会浪费时间,效率低下。所以就有了持续集成。准备事项请提前安装以下软...

Vue中路由router的基本使用

??本文开始我们来给大家介绍在Vue中非常重要的一个内容,就是路由Router什么是路由后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特...

uni-app基于vue开发小程序与标准vue开发新增点

1、路由跳转传参uni.navigateTo({ url: `/pages/transition/spreadTextAction?t=${this.options.t}&rt=${this.options.rt}&l=${this.options.l}`});uni.navigateBack({...

基于Spring Cloud+VUE的多租户小程序商城源码「快速二开可商用」

一、系统介绍JooLun平台是一个专注微信快速二开系统研发的平台,采用Java语言开发,使用的是最新微服务前后端分离技术,目前有公众号和小程序商城两个版本,有公众号后台管理、小程序商城。基于Spring Cloud微服务+VUE实现的核心框架多租户小程序商城源码,核心框架采用SpringBoot2+...