es6学习笔记之Async函数基本教程


Posted in Javascript onMay 11, 2017

本文介绍的是关于es6中Async函数的相关内容,非常出来供大家参考学习,需要的朋友们下面来看看详细的介绍:

async 函数

async 函数,使得异步操作变得更加方便。它是 Generator 函数的语法糖。

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函数对 Generator 函数的改进,体现在以下四点:

1)内置执行器

Generator 函数的执行必须靠执行器,所以才有了co模块,而async函数自带执行器。也就是说,async函数的执行,与普通函数一模一样,只要一行。

var result = asyncReadFile();

上面的代码调用了asyncReadFile函数,然后它就会自动执行,输出最后结果。这完全不像 Generator 函数,需要调用next方法,或者用co模块,才能真正执行,得到最后结果。

2)更好的语义

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

3)更广的适用性

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

4)返回值是 Promise

async函数的返回值是 Promise 对象,这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。

进一步说,async函数完全可以看作多个异步操作,包装成的一个 Promise 对象,而await命令就是内部then命令的语法糖。

一、基本用法

async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

function timeout(ms) {
 return new Promise((resolve) => {
 setTimeout(resolve, ms);
 });
}
async function asyncPrint(value, ms) {
 await timeout(ms);
 console.log(value);
}
asyncPrint('hello world', 5000);

上面代码指定5000毫秒以后,输出hello world。

由于async函数返回的是 Promise 对象,可以作为await命令的参数。所以,上面的例子也可以写成下面的形式:

async function timeout(ms) {
 await new Promise((resolve) => {
 setTimeout(resolve, ms);
 });
}
async function asyncPrint(value, ms) {
 await timeout(ms);
 console.log(value);
}
asyncPrint('hello world', 5000);

async 函数多种使用形式

// 函数声明
async function foo() {}
// 函数表达式
const foo = async function () {};
// 对象的方法
let obj = { async foo() {} };
obj.foo().then(...)
// Class 的方法
class Storage {
 constructor() {
 this.cachePromise = caches.open('avatars');
 }
 async getAvatar(name) {
 const cache = await this.cachePromise;
 return cache.match(`/avatars/${name}.jpg`);
 }
}
const storage = new Storage();
storage.getAvatar('hzzly').then(…);
// 箭头函数
const foo = async () => {};

二、语法

async函数的语法规则总体上比较简单,难点是错误处理机制。

返回 Promise 对象

async函数返回一个 Promise 对象。async函数内部return语句返回的值,会成为then方法回调函数的参数。

async function f() {
 return 'hello world';
}
f().then(v => console.log(v))
// "hello world"

Promise 对象的状态变化

async函数返回的 Promise 对象,必须等到内部所有await命令后面的 Promise 对象执行完,才会发生状态改变,除非遇到return语句或者抛出错误。也就是说,只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数。

async function getTitle(url) {
 let response = await fetch(url);
 let html = await response.text();
 return html.match(/<title>([\s\S]+)<\/title>/i)[1];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log)
// "ECMAScript 2017 Language Specification"

上面代码中,函数getTitle内部有三个操作:抓取网页、取出文本、匹配页面标题。只有这三个操作全部完成,才会执行then方法里面的console.log。

三、使用注意点

await命令后面的Promise对象,运行结果可能是rejected,所以最好把await命令放在try…catch代码块中。

async function myFunction() {
 try {
 await somethingThatReturnsAPromise();
 } catch (err) {
 console.log(err);
 }
}
// 另一种写法
async function myFunction() {
 await somethingThatReturnsAPromise()
 .catch(function (err) {
 console.log(err);
 };
}

多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发。

//异步操作(即互不依赖),被写成继发关系。这样比较耗时,因为只有getFoo完成以后,才会执行getBar,完全可以让它们同时触发。
let foo = await getFoo();
let bar = await getBar();
// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

await命令只能用在async函数之中,如果用在普通函数,就会报错。

更多关于async函数的使用例子可以点击查看这篇文章:https://3water.com/article/113475.htm

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 Javascript
Bootstrap模态框插件使用详解
May 11 #Javascript
canvas实现弧形可拖动进度条效果
May 11 #Javascript
es6学习笔记之Async函数的使用示例
May 11 #Javascript
Node.js安装配置图文教程
May 10 #Javascript
使用bootstrap插件实现模态框效果
May 10 #Javascript
详解Vue用axios发送post请求自动set cookie
May 10 #Javascript
Node.js 异步异常的处理与domain模块解析
May 10 #Javascript
You might like
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
Yii rules常用规则示例
2016/03/15 PHP
Django 中 cookie的使用
2017/08/17 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
再探JavaScript作用域
2014/09/24 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python递归实现打印多重列表代码
2020/02/27 Python
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
逃课上网检讨书
2014/02/20 职场文书
红头文件任命书范本
2014/06/05 职场文书
旅游活动总结
2014/08/27 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
个人收入证明范本
2014/09/18 职场文书
医院见习报告范文
2014/11/03 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
入党团支部推荐意见
2015/06/02 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
导游词之天津盘山
2019/11/01 职场文书