ES7中await如何优雅的捕获异常详解

 更新时间:2022年12月12日 10:33:01   作者:前端摸鱼儿  
异常捕获相信对大家来说并不陌生,下面这篇文章主要给大家介绍了关于ES7中await如何优雅的捕获异常的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

本篇文章介绍的是ES7await语法糖在调用的时候出现异常如何捕获?

传统方式

try {
   const res = await getUser(id)   
}catch(err){
    console.log(err)
}

await让我们使用异步方式开发的代码简便不少,但是每次使用如果都用try..catch来捕获异常反而埋没了它的优势。

 [ err, user ] = await to(UserModel.findById(1));

如果我们使用await同时还能捕获异常,那显然是很完美的实现方式。await-to-js出场~~

await-to-js

安装

npm i await-to-js --save

使用

要求Node 7.6 (或以上),需要ES7的转义器,支持TypeScript

import to from 'await-to-js';
// 如果是Node环境,应该这样使用
// const to = require('await-to-js').default;

async function asyncFunctionWithThrow() {
  const [err, user] = await to(UserModel.findById(1));
  if (!user) throw new Error('User not found');
}

TypeScript的使用方式

interface ServerResponse {
  test: number;
}

const p = Promise.resolve({test: 123});

const [err, data] = await to<ServerResponse>(p);
console.log(data.test);

源码

"main": "dist/await-to-js.umd.js",
/**
 * @param { Promise } promise对象
 * @param { 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])
    .catch<[U, undefined]>((err: U) => {
      if (errorExt) {
        const parsedError = Object.assign({}, err, errorExt);
        return [parsedError, undefined];
      }

      return [err, undefined];
    });
}

export default to;

这段代码很简单,定义了一个函数to,传入的参数两个:promise对象和附加信息。 返回一个promise。 如果promise没有异常走的then方法,则返回一个nulldata组成的数组,否则返回错误信息合并上传入的附加信息undefined组成的数组。

测试用例

目录src/await-to-js.test.ts

测试用例分别测试了没有异常的单值,有异常的单值,传入了附加信息的异常,没有异常的对象。

结束语

看到如此优雅的能在一行实现了异步编程还能返回其错误对象,比try..catch优雅很多。我们开发尽量让自己的代码如艺术一样优雅。不仅能赏心悦目,还能易于维护。我们也能成为编程界的艺术家。

到此这篇关于ES7中await如何优雅的捕获异常的文章就介绍到这了,更多相关ES7 await捕获异常内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • layui table表格数据的新增,修改,删除,查询,双击获取行数据方式

    layui table表格数据的新增,修改,删除,查询,双击获取行数据方式

    今天小编就为大家分享一篇layui table表格数据的新增,修改,删除,查询,双击获取行数据方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 小程序实现长按保存图片的方法

    小程序实现长按保存图片的方法

    这篇文章主要介绍了小程序实现长按保存图片的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 一文解析JavaScript模块构建的三种方式

    一文解析JavaScript模块构建的三种方式

    在现代Web开发中,JavaScript库的构建和打包是一个至关重要的环节,不同的构建方式可以影响到库的性能、可维护性和适用性,本文将深入剖析三种主要的JavaScript模块构建方式:CommonJS、ES模块和AMD,我们将深入探讨它们的工作原理、适用场景以及示例代码
    2023-08-08
  • JS实现随机点名器

    JS实现随机点名器

    这篇文章主要为大家详细介绍了JS实现随机点名器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04
  • JavaScript中的await函数使用小结

    JavaScript中的await函数使用小结

    async 函数是 AsyncFunction 构造函数的实例,并且其中允许使用 await 关键字,async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为,而无需刻意地链式调用 promise,这篇文章主要介绍了JavaScript中的await,需要的朋友可以参考下
    2024-01-01
  • 利用js实现简易红绿灯

    利用js实现简易红绿灯

    这篇文章主要介绍了利用js实现简易红绿灯,帮助大家更好的利用js制作特效,美化网页,感兴趣的朋友可以了解下
    2020-10-10
  • js自定义select下拉框美化特效

    js自定义select下拉框美化特效

    这篇文章主要为大家介绍了javascript自定义select下拉框美化特效的相关资料,需要的朋友可以参考下
    2016-05-05
  • js实现飞机大战游戏

    js实现飞机大战游戏

    这篇文章主要为大家详细介绍了js实现飞机大战游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • javascript 使用for循环时该注意的问题-附问题总结

    javascript 使用for循环时该注意的问题-附问题总结

    所谓for循环就是重复的执行一段代码,for循环也是希望在创建循环时常会用到的工具,这篇内容主要给大家介绍javascript 使用for循环时该注意的问题-附问题总结,需要的朋友可以参考下
    2015-08-08
  • js数字转换为float,取N位小数

    js数字转换为float,取N位小数

    在javascript中不分单精度float和双精度double,凡事有小数的变量都认为是float,因此要取小数后的n位,要用方法toFixed(n)来得到
    2014-02-02

最新评论