理解ES7中的async/await
理解ES7中的async/await
优势是:就是解决多层异步回调的嵌套
从字面上理解 async/await, async是 "异步"的含义,await可以认为是 async wait的简写,因此可以理解 async 用于声明一个function是异步的,而await用于等待一个异步方法执行完成返回的值(返回值可以是一个Promise对象或普通返回的值)。
注意:await 只能出现在 async函数中。
1-1 async的作用?
首先来理解async函数是怎么处理返回值的,我们以前写代码都是通过return语句返回我们想要的值,但是async与return有什么区别呢? 下面我们看如下代码:
async function testAsync() {
return 'hello world';
}
const result = testAsync();
console.log(result); // 打印出来看到 返回一个promise对象
如上代码,我们输出的是一个Promise对象。因此 async返回的是一个Promise对象,因此我们可以使用 then()链来处理这个Promise对象。像如下代码:
async function testAsync() {
return 'hello world';
}
const result = testAsync();
result.then(v => {
console.log(v); // 输出 hello world
});
但是如果 async函数没有返回值的话,那么就会返回 undefined; 如下代码:
async function testAsync() {
return;
}
const result = testAsync();
result.then(v => {
console.log(v); // 输出 undefined
});
1-2 await的作用?
从语义上说,await是在等待一个async函数完成的,async函数返回的是一个Promise对象,await等待的是一个表达式,这个表达式的计算结果是Promise对象或其他值。
async函数返回一个Promise对象,await作用是用于等待一个async函数的返回值。
await函数后面可以接普通函数调用或直接量,请看如下代码:
function getSomething() {
return 'something';
} async function testAsync() {
return Promise.resolve('hello');
} async function test () {
const v1 = await getSomething();
const v2 = await testAsync();
console.log(v1); // something
console.log(v2); // hello
}
test();
注意:await 是等待async函数返回的Promise对象或其他值,await是一个运算符,用于组成表达式, 如果等待的是一个Promise对象,await会阻塞后面的代码(async调用不会造成堵塞,它内部所有的堵塞
都被封装在一个Promise对象中异步执行),等待Promise对象的resolve,然后得到resolve的值,作为await表达式的运输结果。
1-3 async/await 的一起使用的作用及优势在哪?
我们先不用 async/await, 来看看使用setTimeout模拟异步操作如下代码:
var test = function(time) {
return new Promise((resolve, reject) => {
setTimeout(function(){
resolve('hello world');
}, time)
});
}; test(1000).then((v) => {
console.log(v);
});
如果改用 async/await 代码如下:
var testAsync = function(time) {
return new Promise((resolve, reject) => {
setTimeout(function(){
resolve('hello world');
}, time)
});
}; async function test(time) {
const v = await testAsync(time);
console.log(v); // hello world
}
test(1000);
看上面的代码,反而会觉得 使用 async/await 代码变得多一点,复杂一点,但是结果貌似都一样,那么使用 async/await的优势在哪?
1-4 async/await的优势在于处理then链
单一的Promise链貌似不能发现 async/await的优势,但是如果需要处理多个Promise组成的then链的时候,优势可以看出来,因为Promise是通过then链来解决多层回调的问题,现在我们又可以使用
async/await来进一步优化,他们的优点就是解决多层异步回调的嵌套。
假设我们现在有一个需求是,分多个步骤完成,每个步骤都是异步的,并且后面的异步都需要依赖于上一个异步回调返回的数据,进行往下传递。我们先用 setTimeout来模拟异步操作。
function useTimeout (t) {
return new Promise((resolve, reject) => {
setTimeout(()=> {
resolve(t+100)
}, t);
});
} function step1(t) {
console.log(`step1 with ${t}`); // step1 with 300
return useTimeout(t);
} function step2(t) {
console.log(`step2 with ${t}`); // step2 with 400
return useTimeout(t);
} function step3(t) {
console.log(`step3 with ${t}`); // step3 with 500
return useTimeout(t);
} function test() {
const time1 = 300;
step1(time1)
.then(time2 => step2(time2))
.then(time3 => step3(time3))
.then(res => {
console.log(`result is ${res}`); // result is 600
})
}
test();
如果我们使用 async/await来实现,代码变为如下:
function useTimeout (t) {
return new Promise((resolve, reject) => {
setTimeout(()=> {
resolve(t+100)
}, t);
});
} function step1(t) {
console.log(`step1 with ${t}`); // step1 with 300
return useTimeout(t);
} function step2(t) {
console.log(`step2 with ${t}`); // step2 with 400
return useTimeout(t);
} function step3(t) {
console.log(`step3 with ${t}`); // step3 with 500
return useTimeout(t);
} async function test() {
const time1 = 300;
const time2 = await step1(time1);
const time3 = await step2(time2);
const result = await step3(time3);
console.log(`result is ${result}`);
}
test();
上面我们可以看到 使用async/await 代码看起来都是同步的,等第一步完成后,再执行第二步,依次类推..... 并且不需要更多的回调函数嵌套。
下面我们再来看下我们之前讲的,后面的步骤需要上一个步骤的结果传递进去,使用async/await的优势可能更明显。
如下代码:
function useTimeout (t) {
return new Promise((resolve, reject) => {
setTimeout(()=> {
resolve(t+100)
}, t);
});
} function step1(t1) {
console.log(`step1 with ${t1}`); // step1 with 300
return useTimeout(t1);
} function step2(t1, t2) {
console.log(`step2 with ${t1} and ${t2}`); // step2 with 300 and 400
return useTimeout(t1+t2);
} function step3(t1, t2, t3) {
console.log(`step3 with ${t1} and ${t2} and ${t3}`); // step3 with 300 and 400 and 800
return useTimeout(t1+t2+t3);
} async function test() {
const time1 = 300;
const time2 = await step1(time1);
const time3 = await step2(time1, time2);
const result = await step3(time1, time2, time3);
console.log(`result is ${result}`); // result is 1600
}
test();
1-5 捕捉错误
我们可以使用 try catch 来捕获错误,如下代码:
var sleep = function (time) {
return new Promise((resolve, reject) => {
setTimeout(function() {
// 出错了, 返回 error
reject('error');
}, time);
})
}; var start = async function() {
try {
console.log('start');
await sleep(3000); // 返回一个错误
// 下面代码不会被执行
console.log('end');
} catch (err) {
console.log(err); // 捕捉错误 error
}
}; start();
理解ES7中的async/await的更多相关文章
- 理解C#中的 async await
前言 一个老掉牙的话题,园子里的相关优秀文章已经有很多了,我写这篇文章完全是想以自己的思维方式来谈一谈自己的理解.(PS:文中涉及到了大量反编译源码,需要静下心来细细品味) 从简单开始 为了更容易理解 ...
- JavaScript ES7 中使用 async/await 解决回调函数嵌套问题
原文链接:http://aisk.me/using-async-await-to-avoid-callback-hell/ JavaScript 中最蛋疼的事情莫过于回调函数嵌套问题.以往在浏览器中, ...
- 关于ES7中的async/await在客户端和服务端上的实践
一.前言 在项目中经常遇到处理异步请求的情况,面对层层的嵌套,回调显示那么苍白无力: async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案,既然这样就用上吧. 二.配 ...
- ES7中的async和await
ES7中的async和await 在上一章中,使用Promise将原本的回调方式转换为链式操作,这就将一个个异步执行的操作串在一条同步线上了.下一次的操作必须等待当前操作的结束. 使用Promise的 ...
- 【TypeScript】如何在TypeScript中使用async/await,让你的代码更像C#。
[TypeScript]如何在TypeScript中使用async/await,让你的代码更像C#. async/await 提到这个东西,大家应该都很熟悉.最出名的可能就是C#中的,但也有其它语言也 ...
- 在现有代码中通过async/await实现并行
在现有代码中通过async/await实现并行 一项新技术或者一个新特性,只有你用它解决实际问题后,才能真正体会到它的魅力,真正理解它.也期待大家能够多分享解一些解决实际问题的内容. 在我们遭遇“黑色 ...
- js中的async await
JavaScript 中的 async/await 是属于比较新的知识,在ES7中被提案在列,然而我们强大的babel粑粑已经对它进行列支持! 如果开发中使用了babel转码,那么就放心大胆的用吧. ...
- [C#] .NET4.0中使用4.5中的 async/await 功能实现异
好东西需要分享 原文出自:http://www.itnose.net/detail/6091186.html 在.NET Framework 4.5中添加了新的异步操作库,但是在.NET Framew ...
- 在Silverlight中使用async/await
现在 async/await 大行其道,确实,有了 async/await ,异步编程真是简单多了,个人觉得 async/await 的出现,给开发者还来的方便,绝不亚于当年 linq 的出现. 但要 ...
随机推荐
- 【Java基础】14、位运算之——按位与(&)操作——(快速取模算法)
学习redis 字典结构,hash找槽位 求槽位的索引值时,用到了 hash值 & sizemask操作, 其后的scan操作涉及扫描顺序逻辑,对同模的槽位 按一定规则扫描! 其中涉及位运算 ...
- nginx简单使用配置
使用nginx首先要明确使用场景,这里是一台服务器实现多种类型访问:网站首页访问,GitLab访问,note(私人springboot项目),静态文件访问. 下面是一份配置文件 nginx.conf, ...
- Tests of the Equality of Two Means
Introduction In this lesson, we'll continue our investigation of hypothesis testing. In this case, w ...
- vue-cli脚手架目录一览
最近在学习vue,看的稀里糊涂.今天从头开始,把cli配置的vue项目目录和配置文件搞清楚. 先看看整个项目目录结构: 再看看build文件夹下相关文件及目录: config文件夹下目录和文件: 接下 ...
- ps -ef|grep ?解释
上述内容为: 命令拆解: ps:将某个进程显示出来-A 显示所有程序. -e 此参数的效果和指定"A"参数相同.-f 显示UID,PPIP,C与STIME栏位. grep命令是查找 ...
- Linux 改动inittab文件及忘记密码等导致无法进入系统的解决办法
改动inittab文件及忘记密码等导致无法进入系统的解决办法[摘] by:授客 QQ:1033553122 inittab是linux的系统启动模式配置文件,在”/etc“文件目录下没,其内容是: # ...
- MVP架构分析与搭建
一个项目的核心就是架构 1.什么是MVP:MVP是一种项目架构设计模式. 其实MVP的本质就是将view和model完全隔离出来,通过Presenter (主持人) 统一调度管理.
- (网页)备注在HTML页面的放置的小技巧(title属性)
其实很简单,就是title这个属性:(字符多余的剪切,title显示完整的字符) 下面是代码: <ul> <li title="江南style.江南style.江南styl ...
- Django 信息
Request information USER admin GET No GET data POST No POST data FILES No FILES data COOKIES Variabl ...
- SOAP REST
SOAP是基于RPC原理,是传统程序的函数调用和返回在RPC中被请求和应答代替了而已. SOAP Simple Object Access Protocol,是一种严格定义的信息交换协议,用于在web ...