笑看天下无敌手 发表于 2022-6-23 21:23:16

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

有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
作者:Marina Mosti 译者:前端小智 来源:medium 原文:https://blog.bitsrc.io/stop-using-async-await-like-this-use-the-original-instead-172b5df17589
最近看到一些开发者使用这种方法来处理 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) => )
    .catch((err) => {
      if (errorExt) {
      const parsedError = Object.assign({}, err, errorExt);
      return ;
      }
      return ;
    });
}

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

const = 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来包装?
https://img-blog.csdnimg.cn/img_convert/3f359abd328886f68e98168ea1eaea64.png
只有找到原始的to函数定义,并理解其意图,你才能知道 “啊,原来to函数返回的 Promise 永远不会被拒绝”。
所以它进一步增加了其他开发者的理解成本,使得熟悉的 async/await 变得不再 “熟悉”。
2. 从实用性的角度来看

to函数的主要使用情况是,在同一上下文中有多个await promises,而它们相应的错误处理方式是不同的。那么就使用这个封装函数对每个错误进行不同的处理,减少对try...catch的使用。
但在实际开发,在每个到函数之后,你需要使用if语句来确定是否有错误。这与使用try...catch的本意没有什么不同,都是为了检查错误。
https://img-blog.csdnimg.cn/img_convert/e3c6fcccdd05206876f1c7ddf1cc6199.png
其次,在真实的生产环境中,下一个Promise依赖上一个Promise的情况并不少见。但重要的一点是,这两个Promise通常是关联函数。所以在外层使用try...catch来统一处理错误是没有问题的。比如说
https://img-blog.csdnimg.cn/img_convert/d50bcd008cb69ea5d83258057acd5ccc.png
最后,在JavaScript中,大多数Promise场景都是在 Input/output上,比如网络IO和文件IO。这些IO场景可以将拦截器封装在下层,并根据错误代码统一处理。例如,使用axios拦截器。
https://img-blog.csdnimg.cn/img_convert/8162a34ce14d12c3a9deeff6a766866d.png
所以它可能并不像预期的那样实用。也就是说,它可能只用于整个项目的一小部分,而且成本超过了收益。
这就是我所有的观点,你怎么看?你赞成这种做法吗?
编辑中可能存在的bug没法实时知道,事后为了解决这些bug,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: 停止像这样使用 “async/await“,改用原版