JavaScript中async await更优雅的错误处理方式

 更新时间:2021年09月29日 10:58:42   作者:Gopal  
async/await中的异常处理很让人混乱,尽管有很多种方式来应对async 函数的异常,但是连经验丰富的开发者有时候也会搞错,所以这篇文章主要给大家介绍了关于JavaScript中async await更优雅的错误处理方式的相关资料,需要的朋友可以参考下

背景

团队来了新的小伙伴,发现我们的团队代码规范中,要给 async  await 添加 try...catch。他感觉很疑惑,假如有很多个(不集中),那不是要加很多个地方?那不是很不优雅?

为什么要错误处理

JavaScript 是一个单线程的语言,假如不加 try ...catch ,会导致直接报错无法继续执行。当然不意味着你代码中一定要用 try...catch 包住,使用 try...catch 意味着你知道这个位置代码很可能出现报错,所以你使用了 try...catch 进行捕获处理,并让程序继续执行。

我理解我们一般在执行 async await 的时候,一般运行在异步的场景下,这种场景一般不应该阻塞流程的进行,所以推荐使用了 try...catch 的处理。

async await 更优雅的错误处理

但确实如那位同事所说,加 try...catch 并不是一个很优雅的行为。所以我 Google 了一下,发现 How to write async await without try-catch blocks in Javascript 这篇文章中提到了一种更优雅的方法处理,并封装成了一个库——await-to-js。这个库只有一个 function,我们完全可以将这个函数运用到我们的业务中,如下所示:

/**
 * @param { Promise } promise
 * @param { Object= } errorExt - Additional Information you can pass to the err object
 * @return { Promise }
 */
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]) // 执行成功,返回数组第一项为 null。第二个是结果。
    .catch<[U, undefined]>((err: U) => {
      if (errorExt) {
        Object.assign(err, errorExt);
      }

      return [err, undefined]; // 执行失败,返回数组第一项为错误信息,第二项为 undefined
    });
}

export default to;

这里需要有一个前置的知识点:await 是在等待一个 Promise 的返回值。

正常情况下,await 命令后面是一个 Promise 对象,返回该对象的结果。如果不是 Promise 对象,就直接返回对应的值。

所以我们只需要利用 Promise 的特性,分别在 promise.then 和 promise.catch 中返回不同的数组,其中 fulfilled 的时候返回数组第一项为 null,第二个是结果。rejected 的时候,返回数组第一项为错误信息,第二项为 undefined。使用的时候,判断第一项是否为空,即可知道是否有错误,具体使用如下:

import to from 'await-to-js';
// If you use CommonJS (i.e NodeJS environment), it should be:
// const to = require('await-to-js').default;

async function asyncTaskWithCb(cb) {
     let err, user, savedTask, notification;

     [ err, user ] = await to(UserModel.findById(1));
     if(!user) return cb('No user found');

     [ err, savedTask ] = await to(TaskModel({userId: user.id, name: 'Demo Task'}));
     if(err) return cb('Error occurred while saving task');

    if(user.notificationsEnabled) {
       [ err ] = await to(NotificationService.sendNotification(user.id, 'Task Created'));
       if(err) return cb('Error while sending notification');
    }

    if(savedTask.assignedUser.id !== user.id) {
       [ err, notification ] = await to(NotificationService.sendNotification(savedTask.assignedUser.id, 'Task was created for you'));
       if(err) return cb('Error while sending notification');
    }

    cb(null, savedTask);
}

小结

async await 中添加错误处理个人认为是有必要的,但方案不仅仅只有 try...catch。利用 async await 和 Promise 的特性,我们可以更加优雅的处理 async await 的错误。

总结

到此这篇关于JavaScript中async await更优雅的错误处理方式的文章就介绍到这了,更多相关async await优雅错误处理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js设计模式之结构型享元模式详解

    js设计模式之结构型享元模式详解

    这篇文章主要为大家详细介绍了js设计模式之结构型享元模式的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 一种新的javascript对象创建方式Object.create()

    一种新的javascript对象创建方式Object.create()

    这篇文章主要介绍了一种新的javascript对象创建方式Object.create(),感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 让浏览器崩溃的12行JS代码(DoS攻击分析及防御)

    让浏览器崩溃的12行JS代码(DoS攻击分析及防御)

    现在有一段12行的JavaScript代码,可以让firefox、chrome、safari浏览器崩溃,而且还能让iphone重启、安卓闪退,本文作者对于该12行代码进行了分析解读并且提出了相应的防御办法,欢迎大家一同探讨。有需要的朋友们可以参考借鉴。
    2016-10-10
  • JS模拟Dialog弹出浮动框效果代码

    JS模拟Dialog弹出浮动框效果代码

    这篇文章主要介绍了JS模拟Dialog弹出浮动框效果代码,涉及JavaScript可拖动窗口的创建及布局相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 如何在postman中添加cookie信息步骤解析

    如何在postman中添加cookie信息步骤解析

    这篇文章主要介绍了如何在postman中添加cookie信息,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • 支付宝小程序从手动埋点到自动埋点的实现过程

    支付宝小程序从手动埋点到自动埋点的实现过程

    埋点的意思是在你想要的数据节点出进行设置,可以方便进行采集,下面这篇文章主要给大家介绍了关于支付宝小程序从手动埋点到自动埋点的相关资料,需要的朋友可以参考下
    2022-03-03
  • JavaScript实现网页头部进度条刷新

    JavaScript实现网页头部进度条刷新

    这篇文章主要介绍了JavaScript实现网页头部进度条刷新实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-04-04
  • javascript实现文件拖拽事件

    javascript实现文件拖拽事件

    这篇文章主要为大家详细介绍了javascript实现文件拖拽事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-03-03
  • ES6 系列之 WeakMap的使用示例

    ES6 系列之 WeakMap的使用示例

    这篇文章主要介绍了ES6 系列之 WeakMap的使用示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Google 静态地图API实现代码

    Google 静态地图API实现代码

    Google 静态地图 文档说的很详细,这里就不在啰嗦了!
    2010-11-11

最新评论