在实际开发中总会遇到许多异步的问题,最常见的场景便是接口请求之后一定要等一段时间才能得到结果,如果遇到多个接口前后依赖,那么问题就变得复杂。大家都一直在尝试使用更好的方案来解决这些问题。最开始只能利用回调函数,后来开始有人使用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的更多相关文章

  1. async & await 的前世今生(Updated)

    async 和 await 出现在C# 5.0之后,给并行编程带来了不少的方便,特别是当在MVC中的Action也变成async之后,有点开始什么都是async的味道了.但是这也给我们编程埋下了一些隐 ...

  2. [.NET] 利用 async & await 的异步编程

    利用 async & await 的异步编程 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/5922573.html  目录 异步编程的简介 异 ...

  3. [.NET] 怎样使用 async & await 一步步将同步代码转换为异步编程

    怎样使用 async & await 一步步将同步代码转换为异步编程 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/6079707.html  ...

  4. [.NET] 利用 async & await 进行异步 IO 操作

    利用 async & await 进行异步 IO 操作 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/6082673.html  序 上次,博主 ...

  5. [C#] 走进异步编程的世界 - 开始接触 async/await

    走进异步编程的世界 - 开始接触 async/await 序 这是学习异步编程的入门篇. 涉及 C# 5.0 引入的 async/await,但在控制台输出示例时经常会采用 C# 6.0 的 $&qu ...

  6. ASP.NET 中的 Async/Await 简介

    本文转载自MSDN 作者:Stephen Cleary 原文地址:https://msdn.microsoft.com/en-us/magazine/dn802603.aspx 大多数有关 async ...

  7. C# async/await 使用总结

    今天搞这两个关键字搞得有点晕,主要还是没有彻底理解其中的原理. 混淆了一个调用异步方法的概念: 在调用异步方法时,虽然方法返回一个 Task,但是其中的代码已经开始执行.该方法在调用时,即刻执行了一部 ...

  8. 【转】async & await 的前世今生

    async 和 await 出现在C# 5.0之后,给并行编程带来了不少的方便,特别是当在MVC中的Action也变成async之后,有点开始什么都是async的味道了.但是这也给我们编程埋下了一些隐 ...

  9. async & await 的前世今生

    async 和 await 出现在C# 5.0之后,给并行编程带来了不少的方便,特别是当在MVC中的Action也变成async之后,有点开始什么都是async的味道了.但是这也给我们编程埋下了一些隐 ...

随机推荐

  1. POJ 2136 Vertical Histogram(当时写的比较恶心,优化一下)

    Vertical Histogram Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 21223 Accepted: 10048 ...

  2. 15分钟从零开始搭建支持10w+用户的生产环境(四)

    上一篇文章,介绍了这个架构中,WebServer的选择,以及整个架构中扩展时的思路. 原文地址:15分钟从零开始搭建支持10w+用户的生产环境(三)   五.架构实践 前边用了三篇文章,详细介绍了这个 ...

  3. Java笔记(day23-day26)

     IO流1,复制一个文本文件. 1,明确体系:        源:InputStream ,Reader        目的:OutputStream ,Writer    2,明确数据:       ...

  4. 第一个Vue-cli

    第一步下载node.js https://nodejs.org/zh-cn/ 安装成功后 在cmd 输入 node -v 看看能不能打印出来 在cmd 输入 nmp-v 看看能不能打印出来 全局安装 ...

  5. Coursera课程笔记----计算导论与C语言基础----Week 1

    计算机的基本原理(Week 1) 第一次数学危机 公元前500年,毕达哥拉斯学派,他们相信数是万物的本源:一切数均可表示成整数或者整数之比 然而毕达哥拉斯证明了勾股定理,某些直角三角形的三边比不能用整 ...

  6. python语法学习第二天--条件与循环

    条件:(一条或多条为true或false的语句.任何非0和非空(null)值为true,0 或者 null为false)若为true执行If下的语句,若为false执行else中的语句 分支: ① i ...

  7. MySQL编程

    MySQL 使用标准 SQL 检索和处理数据,体积小.开源.免费,易于快速部署.正是因为这些特点,使得其在互联网行业,特别是 Web 应用方面使用相当广泛.至今最新的版本已到 8.0. 一 基本操作 ...

  8. eclipse导入工程报错-项目或者文件有红叉的解决方案

    1.Java的JDK或者Tomcat版本不一致 像这样的我们首先找到项目---->Build Path--->Config BuildPath,将找不到的JDK或者Tomcat进行删除和添 ...

  9. 【雕爷学编程】Arduino动手做(63)---TCS3200D颜色识别传感器

    37款传感器与执行器的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止这37种的.鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为 ...

  10. 「雕爷学编程」Arduino动手做(19)—震动报警模块

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...