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

目录
  • 背景
  • 为什么要错误处理
  • 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优雅错误处理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS中如何优雅的使用async await详解

    目录 jQuery的$.ajax Webpack时代的开始 深入了解Promise 消灭嵌套 await-to-js 总结 jQuery的$.ajax 在开始之前我们先来聊聊我的js异步之路.在我还在学校的时候,那时候还是 jQuery 的天下,我直接接触到并且经常使用的异步操作就是网络请求,一手 $.ajax走天下,伴我过了大二到毕业后差不多大半年的时间. $.ajax( "/xxx" ) .done(function() { // success !!! do something.

  • 深入浅出探究JavaScript中的async与await

    深入浅出探究JavaScript中的async与await

    目录 1.前言 2.详解 2.1.async 2.1.1.函数返回非Promise对象 2.1.2.函数返回Promise对象 2.2.await 2.3.async.await结合使用 2.4.async.await异常处理 3.总结 1.前言 ​ async函数,也就是我们常说的async/await,是在ES2017(ES8)引入的新特性,主要目的是为了简化使用基于Promise的API时所需的语法.async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,

  • JS中的async与await怎么使用

    目录 一.async 二.await: 三.综合应用 一.async async创建一个异步函数来定义一个代码块,在其中运行异步代码; 怎样变成异步函数呢?以 async 这个关键字开始,它可以被放置在一个函数前面 async function f() { return 1; } f().then(alert); // 1 //上下结果一样 async function f() { return Promise.resolve(1); } f().then(alert); // 1 //也可以用

  • JavaScript中async,await的使用和方法

    JS中 async函数和await 关键字 function hellworld() { return "您好!美好世界!"; } console.log(hellworld()); // 您好!美好世界! async function asyHellworld() { return "您好!美好世界!"; } console.log(asyHellworld()); // Promise { '您好!美好世界!' } 普通函数 hellworld 将简单地返回字符

  • JS循环中正确使用async、await的姿势分享

    JS循环中正确使用async、await的姿势分享

    目录 概览(循环方式 - 常用) 声明遍历的数组和异步方法 for 循环中使用 map 中使用 forEach 中使用 filter 中使用 附使用小结 总结 概览(循环方式 - 常用) for map forEach filter 声明遍历的数组和异步方法 声明一个数组:️ const skills = ['js', 'vue', 'node', 'react'] 再声明一个promise的异步代码: ️ function getSkillPromise (value) { return ne

  • 详解JavaScript Promise和Async/Await

    详解JavaScript Promise和Async/Await

    概述 一般在开发中,查询网络API操作时往往是比较耗时的,这意味着可能需要一段时间的等待才能获得响应.因此,为了避免程序在请求时无响应的情况,异步编程就成为了开发人员的一项基本技能. 在JavaScript中处理异步操作时,通常我们经常会听到 "Promise "这个概念.但要理解它的工作原理及使用方法可能会比较抽象和难以理解. 四个示例 那么,在本文中我们将会通过实践的方式让你能更快速的理解它们的概念和用法,所以与许多传统干巴巴的教程都不同,我们将通过以下四个示例开始: 示例1:用生

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

    目录 背景 为什么要错误处理 async await 更优雅的错误处理 小结 总结 背景 团队来了新的小伙伴,发现我们的团队代码规范中,要给 async  await 添加 try...catch.他感觉很疑惑,假如有很多个(不集中),那不是要加很多个地方?那不是很不优雅? 为什么要错误处理 JavaScript 是一个单线程的语言,假如不加 try ...catch ,会导致直接报错无法继续执行.当然不意味着你代码中一定要用 try...catch 包住,使用 try...catch 意味着你

  • JavaScript中async和await的使用及队列详情

    目录 一.宏任务和微任务的队列入门知识,可以参考之前的文章: 1.async && await概念 2.async && await基本使用 二.async&& await结合promise在面试时回遇到的队列问题 三.总结 一.宏任务和微任务的队列入门知识,可以参考之前的文章: [JavaScript的事件循环机制] 宏任务和微任务在前端面试中,被经常提及到,包括口头和笔试题 1.async && await概念 async: 使用asyn

  • JavaScript中async与await实现原理与细节

    目录 一.回调地狱 二.Promise 三.生成器(generator) 四.使用生成器同步化promise 五.async.await异步代码究极解决方案 一.回调地狱 在es6兴起之后许多人都开始使用promise,promise目的是解决es5中的回调地狱(callback hell),那么什么是回调地狱呢?先来提一个需求,现在需要发送n个request请求,第二个请求参数需要第一个请求的结果,第三个请求的参数需要第二个请求的结果,以此类推... ,在没有promise的条件下,我们不难使

  • Go语言中更优雅的错误处理

    从现状谈起 Go语言受到诟病最多的一项就是其错误处理机制.如果显式地检查和处理每个error,这恐怕的确会让人望而却步.下面我们将给大家介绍Go语言中如何更优雅的错误处理. Golang 中的错误处理原则,开发者曾经之前专门发布了几篇文章( Error handling and Go和 Defer, Panic, and Recover.Errors are values )介绍.分别介绍了 Golang 中处理一般预知到的错误与遇到崩溃时的错误处理机制. 一般情况下,我们还是以官方博客中的错误

  • Js中async/await的执行顺序详解

    前言 虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await(如果对async/await不熟悉可以先看下这篇文章)后拓展了一下,我理了一下await之后js的执行顺序,希望可以给别人解疑答惑,先简单介绍一下async/await. async/await 是一种编写异步代码的新方法.之前异步代码的方案是回调和 promise. async/await 是建立在 promise 的基础上

  • JS中async/await实现异步调用的方法

    async/await多个函数关联调用 async/await使得异步代码看起来像同步代码 async函数会隐式地返回一个promise,而promise的reosolve值就是函数return的值 Async/Await不需要写.then,不需要写匿名函数处理Promise的resolve值,也不需要定义多余的data变量,还避免了嵌套代码 async声明一个异步函数 await只能在async函数中使用,后面跟一个promise对象 所以在模拟异步调用函数时,函数体内返回promise as

  • JavaScript中为事件指定处理程序的五种方式分析

    本文实例讲述了JavaScript中为事件指定处理程序的五种方式.分享给大家供大家参考,具体如下: JavaScript和HTML之间的交互是通过事件实现的. IE9.Firefox.Opera.Sarifi.Chrome都已经实现了DOM2级事件模块的核心部分,IE8是最后一个仍然使用其专有事件系统的主要浏览器. 事件流: 事件流描述的是从页面中接受事件的顺序,但IE和Netscape却提出了完全相反的事件流的概念,IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流. 1) 事件

  • javaScript中定义类或对象的五种方式总结

    第一种方式: 工厂方法 能创建并返回特定类型的对象的工厂函数(factory function). function createCar(sColor){ var oTempCar = new Object; oTempCar.color = sColor; oTempCar.showColor = function (){ alert(this.color); }; return oTempCar; } var oCar1 = createCar(); var oCar2 = createCa

  • JavaScript中的await/async的作用和用法

    await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了.虽然没有在 ES2016 中录入,但很快就到来,目前已经在 ES-Next Stage 4 阶段. 直接上例子,比如我们需要按顺序获取:产品数据=>用户数据=>评论数据 老朋友 Ajax 传统的写法,无需解释 // 获取产品数据 ajax('products.json', (products) => { console.log('AJAX/products >>>', JSON

随机推荐