JavaScript async/await原理及实例解析


Posted in Javascript onDecember 02, 2020

随着Node 7的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await。

异步编程的最高境界,就是根本不用关心它是不是异步。

async 函数就是隧道尽头的亮光,很多人认为它是异步操作的终极解决方案。

async 和 await 起了什么作用

async 起什么作用

这个问题的关键在于,async 函数是怎么处理它的返回值的!

我们当然希望它能直接通过return语句返回我们想要的值,但是如果真是这样,似乎就没 await 什么事了。所以,写段代码来试试,看它到底会返回什么:

async function testAsync() {
  return "hello async";
}
const result = testAsync();
console.log(result);

看到输出就恍然大悟了——输出的是一个 Promise 对象。

c:\var\test> node --harmony_async_await .
Promise { 'hello async' }

所以,async 函数返回的是一个 Promise 对象。从文档中也可以得到这个信息。async 函数(包含函数语句、函数表达式、Lambda表达式)会返回一个 Promise 对象,如果在函数中return一个直接量,async 会把这个直接量通过Promise.resolve()封装成 Promise 对象。

async 函数返回的是一个 Promise 对象,所以在最外层不能用 await 获取其返回值的情况下,我们当然应该用原来的方式:then()链来处理这个 Promise 对象,就像这样

testAsync().then(v => {
  console.log(v);  // 输出 hello async
});

语法很简单,就是在函数前面加上async关键字,来表示它是异步的,那怎么调用呢?async函数也是函数,平时我们怎么使用函数就怎么使用它,直接加括号调用就可以了,为了表示它没有阻塞它后面代码的执行,我们在async函数调用之后加一句console.log;

async function timeout() {
  return 'hello world'
}
timeout();
console.log('虽然在后面,但是我先执行');

打开浏览器控制台,我们看到了

JavaScript async/await原理及实例解析

async函数 timeout 调用了,但是没有任何输出,它不是应该返回 'hello world', 先不要着急,看一看timeout()执行返回了什么?把上面的 timeout()语句改为console.log(timeout())

async function timeout() {
  return 'hello world'
}
console.log(timeout());
console.log('虽然在后面,但是我先执行');

继续看控制台

JavaScript async/await原理及实例解析

原来async函数返回的是一个promise对象,如果要获取到promise返回值,我们应该用then方法,继续修改代码

async function timeout() {
  return 'hello world'
}
timeout().then(result => {
  console.log(result);
})
console.log('虽然在后面,但是我先执行');

看控制台

JavaScript async/await原理及实例解析

我们获取到了"hello world', 同时timeout的执行也没有阻塞后面代码的执行,和我们刚才说的一致。

这时,你可能注意到控制台中的Promise有一个resolved,这是async函数内部的实现原理。如果async函数中有返回一个值 ,当调用该函数时,内部会调用Promise.solve()方法把它转化成一个promise对象作为返回,但如果timeout函数内部抛出错误呢? 那么就会调用Promise.reject()返回一个promise对象,这时修改一下timeout函数

async function timeout(flag) {
  if (flag) {
    return 'hello world'
  } else {
    throw 'my god, failure'
  }
}
console.log(timeout(true)) // 调用Promise.resolve() 返回promise 对象。
console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。

控制台如下:

JavaScript async/await原理及实例解析

如果函数内部抛出错误, promise对象有一个catch方法进行捕获。

timeout(false).catch(err => {
  console.log(err)
})

async关键字差不多了,我们再来考虑await关键字,await是等待的意思,那么它等待什么呢,它后面跟着什么呢?其实它后面可以放任何表达式,不过我们更多的是放一个返回promise对象的表达式。注意await关键字只能放到async函数里面

现在写一个函数,让它返回promise对象,该函数的作用是2s之后让数值乘以2

// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2 * num)
    }, 2000);
  } )
}

现在再写一个async函数,从而可以使用await关键字, await后面放置的就是返回promise对象的一个表达式,所以它后面可以写上doubleAfter2seconds函数的调用

async function testResult() {
  let result = await doubleAfter2seconds(30);
  console.log(result);
}

现在调用testResult函数

testResult();

打开控制台,2s之后,输出了60.

现在我们看看代码的执行过程,调用testResult函数,它里面遇到了await, await表示等一下,代码就暂停到这里,不再向下执行了,它等什么呢?等后面的promise对象执行完毕,然后拿到promise resolve的值并进行返回,返回值拿到之后,它继续向下执行。具体到我们的代码,遇到await之后,代码就暂停执行了,等待doubleAfter2seconds(30) 执行完毕,doubleAfter2seconds(30)返回的promise开始执行,2秒之后,promise resolve了,并返回了值为60,这时await才拿到返回值60,然后赋值给result,暂停结束,代码才开始继续执行,执行 console.log语句。

就这一个函数,我们可能看不出async/await的作用,如果我们要计算3个数的值,然后把得到的值进行输出呢?

async function testResult() {
  let first = await doubleAfter2seconds(30);
  let second = await doubleAfter2seconds(50);
  let third = await doubleAfter2seconds(30);
  console.log(first + second + third);
}

6秒后,控制台输出220,我们可以看到,写异步代码就像写同步代码一样了,再也没有回调地域了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于javascript实现的搜索时自动提示功能
Dec 26 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
js中作用域的实例解析
Mar 16 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
node 解析图片二维码的内容代码实例
Sep 11 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 #Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 #Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 #Vue.js
vue $router和$route的区别详解
Dec 02 #Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 #Vue.js
JavaScript函数柯里化实现原理及过程
Dec 02 #Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 #Javascript
You might like
用PHP动态创建Flash动画
2006/10/09 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
Three.js基础部分学习
2017/01/08 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
py中的目录与文件判别代码
2008/07/16 Python
Python中实现对list做减法操作介绍
2015/01/09 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
《桂花雨》教学反思
2014/04/12 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
2014年转正工作总结
2014/11/08 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
秦兵马俑导游词
2015/02/02 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL