Generator
Generator 函数是 ES6 提供的一种异步编程解决方案。Generator函数在function关键字与函数名之间有一个*号。
执行Generator 函数返回一个指向函数内部的指针对象，每次调用该对象的next方法，指针从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式/return语句。
next可传入参数，该参数会作为上一个yield表达式的返回值。
例：
function* test() {
yield 'hello';
const text = yield 'world';
console.log(text);
return 'ending';
}
let t = test();
console.log(t.next());//{value: "hello", done: false}
console.log(t.next());//{value: "world", done: false}
console.log(t.next('!'));//"!"
//{value: "ending", done: true}
console.log(t.next());//{value: undefined, done: true}
假设有异步方法fetchData，如果我们希望通过Generator函数写出串联执行的效果：
function fetchData(data) {
return function (cb) {
setTimeout(function () {
cb(data + 1);
}, 500);
}
}
function* test() {
let t1 = yield fetchData(1);
let t2 = yield fetchData(t1);
}
let t = test();
t.next().value((data)=>{
t.next(data).value((data)=>{
t.next(data);
});
});
显然不是我们想要的效果，这时可以做一个Generator自动运行方法，通过递归解决：
run(test);//这样一句话就够了
function run(gen) {
const g = gen();
next();
function next() {
const result = g.next(...arguments);
if (!result.done) {
result.value(next);
}
}
}
但异步函数除了使用回调实现，还可以使用Promise实现，这样我们的自动运行方法就要加上对Promise的处理了。
function run(gen) {
const g = gen();
next();
function next() {
const result = g.next(...arguments);
if (!result.done) {
const value = result.value;
if(isPromise(value)){
value.then(next);
}else{
value(next);
}
}
}
function isPromise(obj){
if( obj && typeof obj.then == 'function' ) return true;
return false;
}
}
现在已经完成了自动执行的功能，但存在两个问题。
- 不能获取到Generator函数最终return的值。
- 但如果异步操作中发生了异常，现在是没办法处理的。
为了解决这两个问题，需要作出修改
- run方法返回一个Promise，最终通过Promise来返回结果
- 递归调用next时，加上onRejected进行处理。而对于使用回调进行异步的方法，则将其转换成一个Promise，使代码可以复用。
如果异步方法返回的不是promise，则包装成一个promise来处理。
function toPromise(obj) {
if (isPromise(obj)) return obj;
if ('function' === typeof obj) return thunkToPromise(obj);
return obj;
}
function isPromise(obj) {
if (obj && typeof obj.then === 'function') return true;
return false;
}
function thunkToPromise(obj) {
return new Promise((resolve, reject) => {
//error first模式，回调函数接收的第一个参数为error
obj(function (err) {
if (err) return reject(err);
resolve([].splice.call(arguments, 1));
});
})
}
最后run方法返回一个promise，这样外部就可以获取到自动执行中遇到的异常或最终结果了。
function run(gen) {
return new Promise((resolve, reject) => {
const g = gen();
next();
function next() {
const result = g.next(...arguments);
if (!result.done) {
const promise = toPromise(result.value);
promise.then(next, reject);//遇到问题就用reject返回异常，不继续递归
} else {
resolve(result.value);//返回最终执行结果
}
}
})
}
async函数
async函数是ES2017标准引入的一种异步操作方式，在function前加上async使用。
例：
test();
async function test(){
let t1 = await fetchData('lin');
console.log(t1);//data of lin
let t2 = await fetchData('qibin');
console.log(t2);//data of qibin
}
function fetchData(name) {
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve(`data of ${name}`);
}, 500);
})
}
很熟悉有没有！其实async函数就是Generator+自动执行。
async异步操作超级优雅，是我认为js异步操作最好的形式。
