mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 18:32:22 +00:00
修改promise/async
This commit is contained in:
parent
caacc57d9f
commit
b88e6b611e
128
docs/promise.md
128
docs/promise.md
@ -383,9 +383,13 @@ run(g);
|
|||||||
|
|
||||||
## async函数
|
## async函数
|
||||||
|
|
||||||
async函数是用来取代回调函数的另一种方法。
|
### 概述
|
||||||
|
|
||||||
只要函数名之前加上async关键字,就表明该函数内部有异步操作。该异步操作应该返回一个Promise对象,前面用await关键字注明。当函数执行的时候,一旦遇到await就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句。
|
async函数与Promise、Generator函数一样,是用来取代回调函数、解决异步操作的另一种方法。它可以写出比Promise和Generator更简洁易读的代码,但是依赖这两者来实现。
|
||||||
|
|
||||||
|
async函数并不属于ES6,而是被列入了ES7,但是traceur编译器和regenerator转码器已经实现了这个功能。
|
||||||
|
|
||||||
|
在用法上,只要函数名之前加上async关键字,就表明该函数内部有异步操作。该异步操作应该返回一个Promise对象,前面用await关键字注明。当函数执行的时候,一旦遇到await就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
||||||
@ -417,4 +421,122 @@ async function asyncValue(value) {
|
|||||||
|
|
||||||
上面代码中,asyncValue函数前面有async关键字,表明函数体内有异步操作。执行的时候,遇到await语句就会先返回,等到timeout函数执行完毕,再返回value。
|
上面代码中,asyncValue函数前面有async关键字,表明函数体内有异步操作。执行的时候,遇到await语句就会先返回,等到timeout函数执行完毕,再返回value。
|
||||||
|
|
||||||
async函数并不属于ES6,而是被列入了ES7,但是traceur编译器已经实现了这个功能。
|
### 与Promise、Generator的比较
|
||||||
|
|
||||||
|
我们通过一个例子,来看Async函数与Promise、Generator函数的区别。
|
||||||
|
|
||||||
|
假定某个DOM元素上面,部署了一系列的动画,前一个动画结束,才能开始后一个。如果当中有一个动画出错,就不再往下执行,返回上一个成功执行的动画的返回值。
|
||||||
|
|
||||||
|
首先是Promise的写法。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
function chainAnimationsPromise(elem, animations) {
|
||||||
|
|
||||||
|
// 变量ret用来保存上一个动画的返回值
|
||||||
|
var ret = null;
|
||||||
|
|
||||||
|
// 新建一个空的Promise
|
||||||
|
var p = Promise.resolve();
|
||||||
|
|
||||||
|
// 使用then方法,添加所有动画
|
||||||
|
for(var anim in animations) {
|
||||||
|
p = p.then(function(val) {
|
||||||
|
ret = val;
|
||||||
|
return anim(elem);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 返回一个部署了错误捕捉机制的Promise
|
||||||
|
return p.catch(function(e) {
|
||||||
|
/* 忽略错误,继续执行 */
|
||||||
|
}).then(function() {
|
||||||
|
return ret;
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
虽然Promise的写法比回调函数的写法大大改进,但是一眼看上去,代码完全都是Promise的API(then、catch等等),操作本身的语义反而不容易看出来。
|
||||||
|
|
||||||
|
接着是Generator函数的写法。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
function chainAnimationsGenerator(elem, animations) {
|
||||||
|
|
||||||
|
return spawn(function*() {
|
||||||
|
var ret = null;
|
||||||
|
try {
|
||||||
|
for(var anim of animations) {
|
||||||
|
ret = yield anim(elem);
|
||||||
|
}
|
||||||
|
} catch(e) {
|
||||||
|
/* 忽略错误,继续执行 */
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
上面代码使用Generator函数遍历了每个动画,语义比Promise写法更清晰,用户定义的操作全部都出现在spawn函数的内部。这个写法的问题在于,必须有一个任务运行器,自动执行Generator函数,上面代码的spawn函数就是任务运行器,它返回一个Promise对象,而且必须保证yield语句后面的表达式,必须返回一个Promise。下面是spawn函数的代码。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
function spawn(genF) {
|
||||||
|
// 返回一个Promise
|
||||||
|
return new Promise(function(resolve, reject) {
|
||||||
|
// 执行Generator函数,返回一个遍历器
|
||||||
|
var gen = genF();
|
||||||
|
|
||||||
|
// 定义一个函数,执行每一个任务
|
||||||
|
function step(nextF) {
|
||||||
|
var next;
|
||||||
|
try {
|
||||||
|
next = nextF();
|
||||||
|
} catch(e) {
|
||||||
|
// 如果任务执行出错,Promise状态变为已失败
|
||||||
|
reject(e);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(next.done) {
|
||||||
|
// 所有任务执行完毕,Promise状态变为已完成
|
||||||
|
resolve(next.value);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 如果还有下一个任务,就继续调用step方法
|
||||||
|
Promise.resolve(next.value).then(function(v) {
|
||||||
|
step(function() { return gen.next(v); });
|
||||||
|
}, function(e) {
|
||||||
|
step(function() { return gen.throw(e); });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
step(function() { return gen.next(undefined); });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
最后是Async函数的写法。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
async function chainAnimationsAsync(elem, animations) {
|
||||||
|
var ret = null;
|
||||||
|
try {
|
||||||
|
for(var anim of animations) {
|
||||||
|
ret = await anim(elem);
|
||||||
|
}
|
||||||
|
} catch(e) {
|
||||||
|
/* 忽略错误,继续执行 */
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
可以看到Async函数的实现最简洁,最符合语义,几乎没有语义不相关的代码。它实际上将Generator写法中的任务运行器,改在语言层面提供,因此代码量最少。Generator写法的spawn函数本质是将Generator函数转为Promise对象,Async函数将这个过程在语言内部处理掉了,不暴露给用户。
|
||||||
|
@ -81,6 +81,7 @@
|
|||||||
- Jafar Husain, [Async Generators](https://docs.google.com/file/d/0B4PVbLpUIdzoMDR5dWstRllXblU/view?sle=true): 对async与Generator混合使用的一些讨论
|
- Jafar Husain, [Async Generators](https://docs.google.com/file/d/0B4PVbLpUIdzoMDR5dWstRllXblU/view?sle=true): 对async与Generator混合使用的一些讨论
|
||||||
- Axel Rauschmayer, [ECMAScript 6 promises (2/2): the API](http://www.2ality.com/2014/10/es6-promises-api.html): 对ES6 Promise规格和用法的详细介绍
|
- Axel Rauschmayer, [ECMAScript 6 promises (2/2): the API](http://www.2ality.com/2014/10/es6-promises-api.html): 对ES6 Promise规格和用法的详细介绍
|
||||||
- Jack Franklin, [Embracing Promises in JavaScript](http://javascriptplayground.com/blog/2015/02/promises/): catch方法的例子
|
- Jack Franklin, [Embracing Promises in JavaScript](http://javascriptplayground.com/blog/2015/02/promises/): catch方法的例子
|
||||||
|
- Luke Hoban, [Async Functions for ECMAScript](https://github.com/lukehoban/ecmascript-asyncawait): Async函数的设计思想,与Promise、Gernerator函数的关系
|
||||||
|
|
||||||
## Class与模块
|
## Class与模块
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user