本文主要是介绍JavaScript-----------------Generator 异步方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前面说过，相比普通的回调函数，promise 可以通过链式调用解决回调嵌套过深的问题。使用promise去处理异步任务的串联执行，它的表现就是 一个then去处理一个异步调用。 最终整体形成一个任务链条，从而实现所有任务的串联执行。
但它任然会有大量的回调函数，虽然它们相互之间没有嵌套，但它还是没有达到传统同步代码的可读性。
Generator
ES6提供的生成器函数已经学过了，现在看它一个例子：
function * foo(){try{console.log('start');const res1 = yield '111';console.log(res1)} catch(e){console.log(e)}
}
const generator = foo();const result = generator.next()
console.log(result); //{value:'111',done:false}generator.throw( new Error('Generator error') )1. 首先 ，调用foo 生成器函数，并不会执行这个函数，而是得到一个generator生成器对象。
2. 第一次去调用这个generator 对象的next方法，这个foo函数的函数体才会开始执行，一直执行到yield关键字所在的位置，把yield关键字后面的值返回出去，然后foo函数暂停执行。然后yield后面的值就会作为next方法返回对象（esult）的value值。
3. 调用生成器对象的 throw方法，这个方法也会让生成器函数继续执行。不过它的作用的是抛出一个异常，所以foo函数继续执行的时候就会去捕获这个异常。
使用Generator管理 异步流程
我们可以使用yield 可以暂停生成器函数的特点，使用生成器函数实现一个更优的异步编程体验。
先来一个简单的例子，看Generator 生成器函数是如何控时异步调用的：
function ajax(url){return new Promise(function(resolve,reject){// throw new Error("ewew")const xhr = new XMLHttpRequest();xhr.open("GET",url);xhr.responseType = "json",xhr.onload = function(){// AA()if(this.status == 200){resolve(this.response)}else{reject(this.response)}};xhr.send();})
};function * main(){const urls = yield ajax("../api/urls.json");console.log(urls);
};
const g = main();
const result = g.next();
console.log(result)
result.value.then(function(data){g.next(data);
})//1. {value: Promise, done: false}
//2. {users: "api/users.json", posts: "api/posts.json"} 这里的ajax 函数就是上篇文章 所封装的一个ajax函数，返回一个promise对象，主要看下面的生成器函数main和它的调用。看一下它的执行过程：
1.首先调用一下main函数，得到一个生成器对象g。
2.调用生成器对象 g 的next()方法，main函数会执行到第一个yield 的位置，也就是执行ajax函数。
3.这里next方法返回对象result 的 value 就是yield返回的promise对象 。这里有打印操作查看后可以印证。
4.所以result.value 就是那个promise对象，接下来可以通过result.value.then()的方式指定这个promise的回调。
5.在promise的回调当中可以拿到这个promise的执行结果（也就是ajax请求到的json数据），在调用一次生成器对象g的next()方法把json数据传递进去。这样生成器函数main就可以继续执行，而且传进去的json数据就是当前yield的返回值。这样到urls变量就能拿到ajax请求的json数据，并且就能看到urls变量得到数据并且被打印出来。
这样对于main函数的内部，就彻底消除了promise的回调，有一种近乎于同步代码的体验。
接下来，我们可以在main函数内部继续添加 yield 操作。
function * main(){const urls1 = yield ajax("../api/urls1.json");console.log(urls);const urls2= yield ajax("../api/urls2.json");console.log(urls2);const urls3= yield ajax("../api/urls3.json");console.log(urls3);
};
const g = main();
const result1 = g.next();
result1.value.then(function(data){let result2 = g.next(data);if(result2.done) return;result2.value.then(function(data){let result3 = g.next(data);if(result2.done) return;result3.value.then(function(data){if(result2.done) return;let result4 = g.next(data);console.log(result4)})})
})这样，result2 对象的value就是第2个yield 后面ajax函数返回的promise对象，result2.value继续可以执行then方法指定第二个promise的回调。在回调函数中拿到第二个ajax函数请求到的数据。
然后再次执行g.next(data)， 继续运行main函数，把拿到的数据传回main函数 并且赋值给urls2.
接下来 依次类推。。。如果我们在main函数当中多次使用yield去返回promise对象，而且每次返回的都是promise对象，那这里就可以不断的在then当中调用next(),直到next函数返回对象的done属性为true；，就是说main函数完全被执行完了后再停止。
所以每次在调用main函数的next方法时，都要先判断done属性是不是为true；（为true就表示 生成器函数已经执行结束了，没必要往下执行了）。
很明显这里我们可以使用递归去不断迭代，直到done属性最终返回true，生成器函数完全结束，就可以结束递归。
我们接下来就使用递归的方式实现 这个生成器函数的 执行器：
function * main(){const urls1 = yield ajax("../api/urls1.json");console.log(urls);const urls2= yield ajax("../api/urls2.json");console.log(urls2);const urls3= yield ajax("../api/urls3.json");console.log(urls3);
};
const g = main();
function handleResult(result){if( result.done ) return;result.value.then(function(data){handleResult(g.next(data));})
};handleResult(g.next());其实还需要考虑的一点是 当执行过程中某个promise失败后的处理逻辑，因为之前我们没有考虑过一旦任何一个promise 失败了，就会出现未捕获的异常。
处理起来也比较简单，直接在promise的then方法中添加onRejected回调函数，在回调中使用生成器对象的throw方法抛出异常然后在main函数中使用try catch 方式去捕获它。
function * main(){try{const urls1 = yield ajax("../api/urls1.json");console.log(urls);const urls2= yield ajax("../api/urls2.json");console.log(urls2);const urls3= yield ajax("../api/urls3.json");console.log(urls3);} catch(e){console.log(e)}
};
const g = main();
function handleResult(result){if( result.done ) return;result.value.then(function(data){handleResult(g.next(data));},function(err){g.throw(err)})
};handleResult(g.next());这样我们就完成了一个生成器函数的执行器。这个调用逻辑完全可以复用。
总结：使用Generator生成器函数最明显的一点就是 使我们的异步调用再次回归扁平化，这是js异步编程当中很重要的一步。所以我们不仅要了解它的用法，还应该理解它是如何工作的，当然日常开发中我们都是使用async await的方式！
async await
在ECMAScript 2017中新增了async的函数 ，它同样提供了异步编程扁平化的体验。而且它是语言层面标准的异步编程语法。使用起来更加方便可靠。
而且 async await 就是生成器函数更方便的语法糖，它们在语法上也是非常类似的。
只需要把生成器函数main修改为用async关键字修饰的普通函数，再把yield关键字替换为await关键字。这样main函数就成为了标准的async函数了。然后就可以直接调用main函数，它们的效果也是完全一致。
与Generator函数相比async函数最大的好处就是它不需要配合 它的执行器函数来使用了。因为它是语言层面的标准异步编程语法，
async function main(){try{const urls = await ajax("../api/urls.json");console.log(urls);const posts = await ajax("../api/posts.json");console.log(posts);const posts2 = await ajax("../api/posts.json");console.log(posts2);const posts3 = await ajax("../api/posts.json");console.log(posts3);const posts4 = await ajax("../api/posts.json");console.log(posts4);const posts5 = await ajax("../api/posts.json");console.log(posts5);} catch(e){console.log(e)}
};
main();然后呢，async函数还能给我们返回一个promise对象，这样就更加利于我们对整体代码的控制。
const promise = main();
promise.then(function(res){console.log("全部完成了！")
})注意：await关键词只能出现在async函数中，不能直接在普通函数中使用。
如果说了解了生成器函数的异步方案，那async函数只是在写法上略有差异，其他所有的东西都是相同的，所以它也没有什么需要去深究的东西。
这篇关于JavaScript-----------------Generator 异步方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
