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 相关文章推荐
在html页面中包含共享页面的方法
Oct 24 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
Javascript玩转继承(一)
May 08 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
Vue实现简单的留言板
Oct 23 Javascript
javascript之Object.assign()的痛点分析
Mar 03 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批量生成缩略图的代码
2008/07/19 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
php中explode与split的区别介绍
2012/10/03 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
node.js中的console用法总结
2014/12/15 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
int和Integer有什么区别
2013/05/25 面试题
自我评价中英文语句
2013/11/30 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
网页美工求职信范文
2014/04/17 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
普通党员个人整改措施
2014/10/27 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
公积金具结保证书
2015/05/11 职场文书
高三教师工作总结2015
2015/07/21 职场文书