ECMAScript 6 学习(二)async函数
来源:互联网 发布:手机淘宝模拟试衣服 编辑:程序博客网 时间:2024/05/18 12:41
2、用法
2.1基本用法
3、语法
3.1返回promise对象
3.2promise状态的变化
3.3await命令
1、什么是async函数
async函数也是异步编程的解决方案。
async函数是对是对generator函数进行了改进。
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());};
后边的gen函数,写成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函数的星号(*)换成async,将yield替换成await。
async函数对generator函数进行改进,体现以下四点。
(1)内置执行器。
generator函数的执行必须依靠执行器,而async函数自带执行器,也就是说,async函数的执行与普通函数一模一样,只要一行。
下面代码调用了asyncReadFile函数,然后就会自动执行,输出最后的结果。这个完全不像generator函数,需要调用next方法,才能得到最终的结果。
var result=asyncReadFile();
(2)更好的语义
async和await,比起星号(*)和yield,语义更清楚。async表示函数中有异步操作,await表示紧跟其后的表达式需要等待结果。
(3)更广的适用性
yield命令后面只能是Thunk函数或者promise对象,而async函数的await命令后面,可以是promise对象和原始类型的值(数值,字符串和布尔值,但这等同于同步操作)
(4)返回值是promise
async函数的返回值是promise对象,执行generator函数返回一个遍历器对象(Iterator对象)方便多了,也就是说,async函数可以看做是多个异步操作,包装成一个promise对象,而await命令是内部then命令的语法糖。
2、用法
2.1基本用法
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);
上面代码指定5秒后输出hello world。
async函数多种使用形式
//函数声明async function foo() {}//函数表达式const foo = async function () {}//对象的方法let obj = { async foo() {} }obj.foo().then(...)//箭头函数const foo = async () => {};//class方法class Storage { constructor() { this.cachePromise = caches.open('avatars'); } async getAvatar(name) { const cache = await this.cachePromise; return cache.match(`/avatars/${name}.jpg`); }}
3、语法
async函数的语法规则总体上比较简单,难点是错误处理机制。
3.1返回的promise对象
async函数返回的是promise对象。
async函数内部return语句返回值,会成为then方法回调函数的参数
async function f() { return 'hello world';}f().then(v => console.log(v))
上面代码中,函数f内部return 命令返回值,会被then方法回调函数接收到。输出“hello world”。
async函数内部抛出的错误,会导致返回的promise对象变成reject状态。抛出的错误对象会被catch方法回调函数接收到。
3.2promise对象状态变化
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)
上面代码中,函数getTitle内部有三个操作:抓取网页,取出文本,匹配页面标题。只有三个操作全部完成,才会执行then方法里面console.log。
3.3 await命令
正常情况下,await命令后边是一个promise对象。如果不是,会被转成一个一个立即resolve的promise对象。
async function f() { return await 123;}f().then(v => console.log(v))
上面代码中,await命令的参数是数值123,他被转成promise对象,并立即resolve。
await命令后边的promise对象如果变成reject状态,则reject的参数会被catch方法的回调函数接收到。
举个栗子
async function f() { await Promise.reject('出错了');}f().then(v => console.log(v)).catch(e => console.log(e))
上面代码中,await语句前面没有return,但是reject方法的参数依然传入catch方法的回调函数,这里如果在wawait前面加上return,效果是一样的。
只要一个await语句后面的promise变成了reject,那么整个async函数都会中断执行。
async function f() { await Promise.reject('出错了'); await Promise.resolve('hello world'); // 不会执行}
上面代码中,第二个await
语句是不会执行的,因为第一个await
语句状态变成了reject
。
- ECMAScript 6 学习(二)async函数
- ECMAScript 6 学习笔记----异步操作和Async函数
- 超级厉害的JavaScript —— ECMAScript 6 标准(9) —— Async函数
- 深入掌握 ECMAScript 6 异步编程(四):async函数的含义与用法
- 深入掌握 ECMAScript 6 异步编程(四):async函数的含义与用法
- ECMAScript 6 入门笔记(五)异步promise,Generator,async
- ECMAScript 6教程 (二) 对象和函数
- ECMAScript 6 入门学习(6.函数的扩展)
- ECMAScript 6 学习笔记----函数的扩展
- ECMAScript 6 学习笔记----Generator函数
- async.js 学习教程(二)
- ECMAScript 6 入门 个人笔记(二)
- EcmaScript 6 箭头函数
- ECMAScript 6 学习笔记
- ECMAScript 6学习笔记
- ECMAScript 6 学习笔记
- ECMAScript 6 学习文档
- ECMAScript 6 学习系列课程 (ES6 Generator 函数的使用)
- 5、volley 官方教程-自定义请求
- Linux运维学习笔记之四:安装后的基本调优及安全设置(系统基础优化)
- ES6中的类
- 《数据库SQL实战》获取所有部门当前manager的当前薪水情况
- seq2seq学习笔记
- ECMAScript 6 学习(二)async函数
- 6、volley 源码解析之工作流程综述
- Linux运维学习笔记之五:Linux目录结构
- Java模版引擎之Freemarker篇
- hadoop系列三:mapreduce的使用(一)
- VC++6.0编辑框显示行号
- laravel 自定义的控制台命令
- Mybatis多对一的处理
- View的滑动的基本知识