async/await 虽然取代了回调,使用类似同步的代码组织方式让代码更加简洁美观,但错误处理时需要加 try/catch

比如下面这样,一个简单的 Node.js 中使用 async/await 的场景:

const fetch = require("node-fetch");

async function getData() {

const url = "https://api.github.com/users/wayou";

try {

const response = await fetch(url);

const data = await response.json();

console.log(data);

} catch (error) {

throw error;

}

} getData();

像这样的异步场景,Node.js 中会有很多。如果都通过 try/catch 来错误处理,数量多了之后也是不太美观的。

将异步进行一层封装

因为本质上 async/awaitPromise,我们可以封装一个简单的方法,将错误处理变得更优雅。

比如下面这样:

function await2js(promise) {
return promise.then(result => [undefined, result]).catch(error => [error, undefined]);
}

该方法始终返回两个结果,第一个是错误,第二个是数据,这和 Node.js 中回调的入参 (err,data)=>void 是一致的,使得这层包装很 Node.js,一点也不会感到奇怪。

所以改造后的使用示例:

async function getData() {
const url = "https://api.github.com/users/wayou";
const [error, response] = await await2js(fetch(url));
if (error) {
throw error;
} const [error2, data] = await await2js(response.json());

if (error2) {

throw error2;

} console.log(data);

}

这层封装针对单个 await,不像 try/catch 那么粗犷一下子包含再次 await。也不是说 try/catch 不能精细地处理错误,但脑补一下把上面两次 await 都用 try/catch 的模样。

当然,如果嫌麻烦,也可通过 Promise.all() 或 Promise 的链式调用将多次 await 操作合并,只处理一次错误。

TypeScript 版本

function await2js<T, K = Error>(promise: Promise<T>) {
return promise
.then<[undefined, T]>((response: T) => [undefined, response])
.catch<[K, undefined]>((error: K) => [error, undefined]);
}

这里有个相应的 npm 包便是做这事情的 await-to-js

相关资源

优雅地 `async/await`的更多相关文章

  1. Vuex结合 async/await 优雅的管理接口请求

    先看看 async/await 的语法 async 函数返回一个 Promise 对象 async 函数内部 return 返回的值.会成为 then 方法回调函数的参数. 1 2 3 4 async ...

  2. 如何优雅地处理Async/Await的异常?

    译者按: 使用.catch()来捕获所有的异常 原文: Async Await Error Handling in JavaScript 译者: Fundebug 本文采用意译,版权归原作者所有 as ...

  3. 进阶篇:以IL为剑,直指async/await

    接上篇:30分钟?不需要,轻松读懂IL,这篇主要从IL入手来理解async/await的工作原理. 先简单介绍下async/await,这是.net 4.5引入的语法糖,配合Task使用可以非常优雅的 ...

  4. Async/Await替代Promise的6个理由

    译者按: Node.js的异步编程方式有效提高了应用性能:然而回调地狱却让人望而生畏,Promise让我们告别回调函数,写出更优雅的异步代码:在实践过程中,却发现Promise并不完美:技术进步是无止 ...

  5. promise async await使用

    1.Promise (名字含义:promise为承诺,表示其他手段无法改变) Promise 对象代表一个异步操作,其不受外界影响,有三种状态: Pending(进行中.未完成的) Resolved( ...

  6. 拒绝回调,拥抱async await

    之前使用jquery中ajax,请求的结果需要写在回调函数里面,后面接触到了axios/fetch,使用了es6中Promise进行封装,这种链式结构调用,看起来比之前直观,可是还是没有解决回调的问题 ...

  7. 告别回调,拥抱async await

    之前使用jquery中ajax,请求的结果需要写在回调函数里面,后面接触到了axios/fetch,使用了es6中Promise进行封装,这种链式结构调用,看起来比之前直观,可是还是没有解决回调的问题 ...

  8. 彻底搞懂 C# 的 async/await

    前言 Talk is cheap, Show you the code first! private void button1_Click(object sender, EventArgs e) { ...

  9. ES8 async/await语法

    Async/await的主要益处是可以避免回调地狱(callback hell)问题 Chromium JavaScript引擎 从v5.5开始支持async/await功能,Chromium Jav ...

随机推荐

  1. java实现堆结构

    一.前言 之前用java实现堆结构,一直用的优先队列,但是在实际的面试中,可能会要求用数组实现,所以还是用java老老实实的实现一遍堆结构吧. 二.概念 堆,有两种形式,一种是大根堆,另一种是小根堆. ...

  2. Apriori算法思想和其python实现

    第十一章 使用Apriori算法进行关联分析 一.导语 "啤酒和尿布"问题属于经典的关联分析.在零售业,医药业等我们经常需要是要关联分析.我们之所以要使用关联分析,其目的是为了从大 ...

  3. MapReduce的架构及原理

    MapReduce是一种分布式计算模型,是Hadoop的主要组成之一,承担大批量数据的计算功能.MapReduce分为两个阶段:Map和Reduce. 一.MapReduce的架构演变 客户端向Job ...

  4. 高性能网络通信框架 HP-Socket

      HP-Socket 详细介绍 HP-Socket 是一套通用的高性能 TCP/UDP/HTTP 通信框架,包含服务端组件.客户端组件和Agent组件,广泛适用于各种不同应用场景的 TCP/UDP/ ...

  5. mac下安装windows系统

    前言:我装win系统的原因很简单,就是某天突然想玩qq宠物了(不要嘲笑,自行尴尬一波)... 下面进入正题: 1.我的当前系统版本: 其实App Store 上新版本的os系统也已经出来很长一段时间了 ...

  6. H5之画布canvas小记,以及通过画布实现原子无规则运动

    我们知道html在h5出之前就仅仅只是一个标签,一个标记,语义化并不强,后来新增的标签如video,audio都是语义化更强(让人一看就懂是什么东西,反正我是这么理解的,一个div不代表着什么),本身 ...

  7. Excel常用的格式处理

    你有没有碰到在Excel中设置了行高自适应后,部分行的行高太小,整体界面不美观的问题呢? 你有没有碰到Excel中的各个sheet页中的各列内容中都有不同个数的回车换行符,内容看起来参差不齐,不美观呢 ...

  8. javascript中的隐式类型转化

    javascript中的隐式类型转化 #隐式转换 ## "+" 字符串和数字 如果某个操作数是字符串或者能够通过以下步骤转换为字符串的话,+将进行拼接操作. 如果其中一个操作数是对 ...

  9. Java判断字符串是否为数字的自定义方法

    //方法一:用JAVA自带的函数 public static boolean isNumeric(String str){ for (int i = str.length();--i>=0;){ ...

  10. 详解MUI顶部选项卡(tab-top-webview-main)的用法

    最近用MUI做手机app的时候,遇到了一点问题.然后就对这个tab-top-webview-main的源码做了点研究,接下来我将和大家详解一下 tab-top-webview-main的用法和应该注意 ...