附件2:async/await
在实际开发中总会遇到许多异步的问题,最常见的场景便是接口请求之后一定要等一段时间才能得到结果,如果遇到多个接口前后依赖,那么问题就变得复杂。大家都一直在尝试使用更好的方案来解决这些问题。最开始只能利用回调函数,后来开始有人使用Promise的思维来搞定。到ES6中开始支持原生的Promise,引入Generator函数。
直到ES7,有了async/await
。
这是一个用同步的思维来解决异步问题的方案。
我想很多人可能还不太分得清同步与异步的区别。如果你已经彻底了解了事件循环,那么想必对异步的概念应该非常了解。当我们发出了请求,并不会等待响应结果,而是会继续执行后面的代码,响应结果的处理在之后的事件循环中解决。那么同步的意思,就是等结果出来之后,代码才会继续往下执行。
我们可以用一个两人问答的场景来比喻异步与同步。A向B问了一个问题之后,不等待B的回答,接着问下一个问题,这是异步。A向B问了一个问题之后,然后就笑呵呵的等着B回答,B回答了之后他才会接着问下一个问题,这是同步。
那么我们先记住这个特点,async/await
使用同步的思维,来解决异步的问题。
在继续分析它的语法与使用之前,我们先介绍一下如何在我们的开发环境中支持该语法。
如果你已经知道如何配置,可跳过
一、如何在自己的开发环境中支持async/await
语法
这里主要介绍两种方式。
1. webpack中支持该语法
首先在当前项目中使用npm下载babel-loader
。
> npm install babel-loader --save-dev
然后在配置文件webpack.confing.dev.js
中配置,在module.exports.module.rules
中添加如下配置元素即可。
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
cacheDirectory: true,
},
},
如果你使用最新版本的create-react-app或者vue-cli来构建你的代码,那么它们应该已经支持了该配置。
2. gulp中支持该语法
首先安装gulp插件
> npm install gulp-babel --save-dev
然后编写任务
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('babel', function() {
return gulp.src('src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
二、如何使用
async函数是Generator的一个语法糖。如果你不知道Generator是什么函数也没有关系,我们只需要知道async函数实际上返回的是一个Promise对象即可。
async function fn() {
return 30;
}
// 或者
const fn = async () => {
return 30;
}
在声明函数时,前面加上关键字async
,这就是async
的用法。当我们用console.log
打印出上面声明的函数fn,我们可以看到如下结果:
console.log(fn());
// result
Promise = {
__proto__: Promise,
[[PromiseStatus]]: "resolved",
[[PromiseValue]]: 30
}
很显然,fn的运行结果其实就是一个Promise对象。因此我们也可以使用then来处理后续逻辑。
fn().then(res => {
console.log(res); // 30
})
await的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后,才继续执行下面的代码。这正是同步的效果。
但是我们需要注意的是,await关键字只能在async函数中使用。并且await后面的函数运行后必须返回一个Promise对象才能实现同步的效果。
当我们使用一个变量去接收await的返回值时,该返回值为Promise中resolve出来的值(也就是PromiseValue)。
// 定义一个返回Promise对象的函数
function fn() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(30);
}, 1000);
})
} // 然后利用async/await来完成代码
const foo = async () => {
const t = await fn();
console.log(t);
console.log('next code');
} foo(); // result:
//
// next code
运行这个例子我们可以看出,当在async函数中,运行遇到await时,就会等待await后面的函数运行完毕,而不会直接执行next code
。
如果我们直接使用then方法的话,想要达到同样的结果,就不得不把后续的逻辑写在then方法中。
const foo = () => {
return fn().then(t => {
console.log(t);
console.log('next code');
})
}
foo();
很显然如果使用async/await的话,代码结构会更加简洁,逻辑也更加清晰。
异常处理
在Promise中,我们知道是通过catch的方式来捕获异常。而当我们使用async时,则通过try/catch
来捕获异常。
function fn() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('some error.');
}, 1000);
})
} const foo = async () => {
try {
await fn();
} catch (e) {
console.log(e); // some error
}
} foo();
如果有多个await函数,那么只会返回第一个捕获到的异常。
function fn1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('some error fn1.');
}, 1000);
})
}
function fn2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('some error fn2.');
}, 1000);
})
} const foo = async () => {
try {
await fn1();
await fn2();
} catch (e) {
console.log(e); // some error fn1.
}
} foo();
实践
在实践中我们遇到异步场景最多的就是接口请求,那么这里就以jquery中的$.get
为例简单展示一下如何配合async/await
来解决这个场景。
// 先定义接口请求的方法,由于jquery封装的几个请求方法都是返回Promise实例,因此可以直接使用await函数实现同步
const getUserInfo = () => $.get('xxxx/api/xx'); const clickHandler = async () => {
try {
const resp = await getUserInfo();
// resp为接口返回内容,接下来利用它来处理对应的逻辑
console.log(resp); // do something
} catch (e) {
// 处理错误逻辑
}
}
为了保证逻辑的完整性,在实践中
try/catch
必不可少。总之,不处理错误逻辑的程序员不是好程序员。
与Promise相比,个人认为async/await
有一定的简洁性,但也并非就比Promise有绝对的优势,因此只能算是提供了另外一种同样很棒的方式,至于大家学习之后选择哪种方式来解决自己的问题,我认为这仅仅只是个人的喜好问题。
附件2:async/await的更多相关文章
- async & await 的前世今生(Updated)
async 和 await 出现在C# 5.0之后,给并行编程带来了不少的方便,特别是当在MVC中的Action也变成async之后,有点开始什么都是async的味道了.但是这也给我们编程埋下了一些隐 ...
- [.NET] 利用 async & await 的异步编程
利用 async & await 的异步编程 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/5922573.html 目录 异步编程的简介 异 ...
- [.NET] 怎样使用 async & await 一步步将同步代码转换为异步编程
怎样使用 async & await 一步步将同步代码转换为异步编程 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/6079707.html ...
- [.NET] 利用 async & await 进行异步 IO 操作
利用 async & await 进行异步 IO 操作 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/6082673.html 序 上次,博主 ...
- [C#] 走进异步编程的世界 - 开始接触 async/await
走进异步编程的世界 - 开始接触 async/await 序 这是学习异步编程的入门篇. 涉及 C# 5.0 引入的 async/await,但在控制台输出示例时经常会采用 C# 6.0 的 $&qu ...
- ASP.NET 中的 Async/Await 简介
本文转载自MSDN 作者:Stephen Cleary 原文地址:https://msdn.microsoft.com/en-us/magazine/dn802603.aspx 大多数有关 async ...
- C# async/await 使用总结
今天搞这两个关键字搞得有点晕,主要还是没有彻底理解其中的原理. 混淆了一个调用异步方法的概念: 在调用异步方法时,虽然方法返回一个 Task,但是其中的代码已经开始执行.该方法在调用时,即刻执行了一部 ...
- 【转】async & await 的前世今生
async 和 await 出现在C# 5.0之后,给并行编程带来了不少的方便,特别是当在MVC中的Action也变成async之后,有点开始什么都是async的味道了.但是这也给我们编程埋下了一些隐 ...
- async & await 的前世今生
async 和 await 出现在C# 5.0之后,给并行编程带来了不少的方便,特别是当在MVC中的Action也变成async之后,有点开始什么都是async的味道了.但是这也给我们编程埋下了一些隐 ...
随机推荐
- JAVA连接Excel最好用的开源项目EasyExcel,官方使用文档及.jar包下载
EasyExcel是一个基于Java的简单.省内存的读写Excel的开源项目.在尽可能节约内存的情况下支持读写百M的Excel. github地址:https://github.com/alibaba ...
- HDU2937 YAPTCHA(威尔逊定理)
YAPTCHA Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
- CF #632 (Div. 2) 对应题号CF1333
1333A Little Artem 在一个\(n\)行\(m\)列的格子上染色,每个格子能染黑白两种 构造一种方案,使得四个方向有至少一个白色格子的黑色格子的数量,比四个方向有至少一个黑色格子的白色 ...
- muduo网络库源码学习————Timestamp.cc
今天开始学习陈硕先生的muduo网络库,moduo网络库得到很多好评,陈硕先生自己也说核心代码不超过5000行,所以我觉得有必要拿过来好好学习下,学习的时候在源码上面添加一些自己的注释,方便日后理解, ...
- gVim配置文件分享
前言 直接可以把这个配置覆盖掉现在安装目录Vim底下的"_vimrc"文件 效果图 Code: set number set tabstop=4 set softtabstop=4 ...
- 前端【JS】,深拷贝与浅拷贝的区别及详解!
我是前端小白一枚,为了巩固知识和增强记忆,开始整理相关的知识,方便以后复习和面试的时候看看.OK,让我们进入正题~ 先说说浅拷贝和深拷贝的理解吧,个人是这样理解的:两个对象A.B, A有数据B为空,B ...
- java23种设计模式——泡MM版
一.创建型模式 1.FACTORY:追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,固然口味有所不同,但不管你带MM往麦当劳或肯德基,只管向服务员说;来四个鸡翅就行了.麦当劳和肯德 ...
- rsync服务端一键安装rsync脚本(非源码)
export RSYNC_PASSWORD=123 USER=rsync AUTHUSERS=bck MK=backupmk local_dir=/backup yum remove rsync &a ...
- 关于网上quartus ii 生成fft核出现问题解决
------------恢复内容开始------------ 关于网上quartus ii 生成fft核出现问题解决 1:必须把软件破解啦 2:必须把IP核破解啦 破解步骤网上也有可以直接看,一定要全 ...
- hadoop问题
如果启动hadoop集群时,无法启动datanode,则可以集群所有节点下dfs.datanode.data.dir的配置值所指示的路径下清空所有文件(夹),然后 hadoop namenode -f ...