Javascript中的async函数详解

 更新时间:2022年03月03日 15:03:36   作者:前端e站  
这篇文章主要为大家详细介绍了Javascript中的async函数,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

前言:async 是“异步”的简写,async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成,await 只能出现在 async 函数中。

Generator 函数:

var fs = require('fs');
var readFile = function (fileName){
 return new Promise(function (resolve, reject){
 fs.readFile(fileName, function(error, data){
 if (error) reject(error);
 resolve(data);
 });
 });
};
var gen = function* (){
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
}

async 函数

var asyncReadFile = async function (){
  var f1 = await readFile('/etc/fstab');
  var f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

显而易见,async函数中async就是将 Generator 函数的星号(*)替换成 async,await等价于yield。

async 函数是非常新的语法功能,属于 ES7。目前,它仍处于提案阶段,但是转码器 Babel 和 regenerator 都已经支持,转码后就能使用。

但async 函数对 Generator 函数做了改进:

1、内置执行器:Generator函数的执行必须靠执行器,所以才有了 co 函数库,而 async 函数自带执行器.也就是说,async 函数的执行,与普通函数一模一样。

var result = asyncReadFile();

2、更好的语义:async 和 await,比起星号和 yield,语义更清楚了。async 表示函数里有异步操作,await 表示紧跟在后面的表达式需要等待结果。

3、更广的适用性:co 函数库约定,yield 命令后面只能是 Thunk 函数或 Promise 对象,而 async 函数的 await 命令后面,可以跟 Promise 对象和原始类型的值(数值、字符串和布尔值,但这时等同于同步操作)。

async 的作用

async 函数负责返回一个 Promise 对象,如果在async函数中 return 一个直接量,async 会把这个直接量通过Promise.resolve()  封装成 Promise 对象;如果 async 函数没有返回值,它会返回 Promise.resolve(undefined)。

await 在等待什么

如果await等到的不是一个promise对象,那跟着的表达式的运算结果就是它等到的东西;

如果是一个promise对象,await会阻塞后面的代码,等promise对象resolve,得到resolve的值作为await表达式的运算结果。

虽然await阻塞了,但await在async中,async不会阻塞,它内部所有的阻塞都被封装在一个promise对象中异步执行。

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!    

相关文章

  • Javascript 获取鼠标当前的位置实现方法

    Javascript 获取鼠标当前的位置实现方法

    这篇文章主要介绍了Javascript 获取鼠标当前的位置实现方法的相关资料,需要的朋友可以参考下
    2016-10-10
  • js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解

    js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解

    这篇文章主要给大家介绍了关于Javascript中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性的相关资料,文中介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-03-03
  • JS实现弹性菜单效果代码

    JS实现弹性菜单效果代码

    这篇文章主要介绍了JS实现弹性菜单效果代码,可实现鼠标滑过后背景色滑块弹性滑过的效果,非常具有实用价值,需要的朋友可以参考下
    2015-09-09
  • 微信小程序动态添加view组件的实例代码

    微信小程序动态添加view组件的实例代码

    本文通过实例代码给大家介绍了微信小程序动态添加view组件的方法,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • JS+CSS实现简单滑动门(滑动菜单)效果

    JS+CSS实现简单滑动门(滑动菜单)效果

    这篇文章主要介绍了JS+CSS实现简单滑动门(滑动菜单)效果,通过JavaScript响应鼠标事件动态设置页面元素样式实现滑动菜单功能,需要的朋友可以参考下
    2015-09-09
  • JavaScript判断输入值是否为正整数(判断变量为数字)

    JavaScript判断输入值是否为正整数(判断变量为数字)

    在项目开发中,有时候需要使用JavaScript验证用户输入的是否为正整数,这篇文章主要给大家介绍了关于JavaScript判断输入值是否为正整数(判断变量为数字)的相关资料,需要的朋友可以参考下,
    2023-11-11
  • 解决layui弹出层layer的area过大被遮挡的问题

    解决layui弹出层layer的area过大被遮挡的问题

    今天小编就为大家分享一篇解决layui弹出层layer的area过大被遮挡的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 小程序实现简单列表功能

    小程序实现简单列表功能

    这篇文章主要为大家详细介绍了小程序实现简单列表功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • js实现支付倒计时返回首页

    js实现支付倒计时返回首页

    这篇文章主要为大家详细介绍了js实现支付倒计时返回首页,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 纯HTML5制作围住神经猫游戏-附源码下载

    纯HTML5制作围住神经猫游戏-附源码下载

    围住神经猫游戏是一款基于html5、jquery、typescript等技术开发的游戏,非常好玩,感兴趣的朋友快来围观吧,体验一把,下面给大家分享使用html5如何制作围住神经猫游戏-附源码下载,有需要的朋友可以参考下
    2015-08-08

最新评论