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 相关文章推荐
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 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高手?学会“懒惰”的编程
2006/12/05 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
最短的IE判断代码
2011/03/13 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
[03:48]大碗DOTA
2019/07/25 DOTA
Django发送html邮件的方法
2015/05/26 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
2014年政协委员工作总结
2014/12/01 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB