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第一课
Feb 27 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
Javascript中replace()小结
Sep 30 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
简单实现node.js图片上传
Dec 18 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 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通用分页类page.php[仿google分页]
2008/08/31 PHP
php判断是否为json格式的方法
2014/03/04 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
php银联网页支付实现方法
2015/03/04 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
ThinkPHP5&5.1框架关联模型分页操作示例
2019/08/03 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
深入讲解Python中的迭代器和生成器
2015/10/26 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
Python 元组操作总结
2019/09/18 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
python实现加密的方式总结
2020/01/19 Python
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
历史专业个人求职信范文
2013/12/07 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
政府法律服务方案
2014/06/14 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
管理失职检讨书
2015/05/05 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android
Go语言怎么使用变长参数函数
2022/07/15 Golang