async/await 就是 Generator 的语法糖,使得异步操作变得更加方便。其中Generator的*换成了async关键字, yield换成了await关键字。
Async函数与Generator相比,甜在哪里?
- async函数内置执行器,函数调用之后会自动执行,输出最后的结果。而Generator需要配合next和co模块一起使用。
- 更好的语义, async表示函数里有异步操作,而await表示紧跟在后面的表达式需要等待结果。
- 更广的适用性,co模块约定, yield后面只能是thunk函数或者Promise对象,但是async可以是Promise对象和原始类型的值 。
- async的返回值是Promise对象,而Generator返回值是iterator。
Async的实现原理,就是将Generator和自动执行函数包装在函数里。
下面是看的博客的分析实现,自己理解分析一下
function my_co(it) {
return new Promise( (resolve, reject) => {
function next(data) {
try{
let {value, done} = it.next(data);
}catch(err) {
reject(err);
}
if(!done) {
Promise.resolve(value).then( val => next(val), reject);
}else{
resolve(value);
}
}
next();
});
}
实际运行一下
function* test() {
yield new Promise( (resolve, reject) => {
setTimeout(resolve(10), 100);
});
yield new Promise( (resolve, reject) => {
resolve(100);
});
yield 10;
return 1000;
}
my_co(test()).then(val => console.log(val) ).catch(err => console.log(err)) //output 1000
下面是执行过程分析
function my_co(it) {
return new Promise( (resolve, reject) => {
function next(data) { //第一次调用,data的值为undefined,第二次调用data为promsie[10],第三次掉用为romise[100],第四次调用为10
try {
var {value, done} = it.next(data); // {value:promise obj, done:false}, data=undefined;{value:promise obj, done:false}, data=10; {value:10, done:false}, data=100;{value:undefined, done:true}, data=10
} catch (error) {
reject(error);
}
if(!done) { //true
//有可能值时vlaue或者promise对象
Promise.resolve(value).then((val) => { //第一次value:promise, 第二次value:promise,第三次为10
console.log(value)
next(val);
}, reject);
}else{
console.log(value);
resolve(value); //第四次调用 value为1000,决议完成(上面的test中若是没有返回值或者返回值为空,则value为undefined)
}
}
next(); //执行一次
});
}