前言
今天开始和大家一起系统的学习ES6+,每天3分钟，用一把斗地主的时间，重学ES6+，前面我们介绍了promise,生成器和迭代器，async await,现在我们总结一下针对异步代码处理方案
业务场景
请求一个接口，拿到返回值，对返回值进行处理，当作第二个接口的请求参数，拿到返回值处理，当作第三个接口的请求参数。最终数据需要调用依次调用3个接口才能拿到。
- 1> url: why -> res: why
- 2> url: res + “aaa” -> res: whyaaa
- 3> url: res + “bbb” => res: whyaaabbb
function requestData(url) {// 异步请求的代码会被放入到executor中return new Promise((resolve, reject) => {// 模拟网络请求setTimeout(() => {// 拿到请求的结果resolve(url)}, 2000);})
}
方案一 回调函数
优点：便于理解 缺点：回调地狱，不能捕获错误
ajax('url', () => {// callback 函数体ajax('url', () => {// callback 函数体ajax('url', () => {// callback 函数体})})
})
方案二 事件监听
f1.on('done', f2);
function f1(){ setTimeout(function () { // f1的任务代码 f1.trigger('done'); }, 1000);
}
优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数；
缺点：整个流程都要变成事件驱动型，运行流程会变得不清晰。
方案三 发布订阅模式
jQuery.subscribe("done", f2);
function f1(){
setTimeout(function () {
// f1的任务代码
jQuery.publish("done");
}, 1000);
}
jQuery.unsubscribe("done", f2);
与"事件监听"类似，但是明显优于后者。因为我们可以通过查看"消息中心"，了解存在多少信号、每个信号有多少订阅者，从而监控程序的运行。
方案四 Promise中then的返回值来解决回调问题
requestData("why").then(res => { return requestData(res + "aaa")
}).then(res => { return requestData(res + "bbb")
}).then(res => { console.log(res)
})
优点:解决了层层回调问题，相对直观 缺点:无法精确捕获到哪个promise错误，链式调用依然不如同步函数代码直观
方案五 Promise + generator实现
function* getData() {const res1 = yield requestData("why")const res2 = yield requestData(res1 + "aaa")const res3 = yield requestData(res2 + "bbb")const res4 = yield requestData(res3 + "ccc")console.log(res4)
}
// 1> 手动执行生成器函数
const generator = getData()
generator.next().value.then(res => {generator.next(res).value.then(res => {generator.next(res).value.then(res => {generator.next(res)})})
})
// 2> 自己封装了一个自动执行的函数
function execGenerator(genFn) {const generator = genFn()function exec(res) {const result = generator.next(res)if (result.done) { return result.value}result.value.then(res => { exec(res)}) } exec()
execGenerator(getData)
优点：代码直观，* yield 可以重新组织代码，同步的方式执行异步代码
缺点：无法执行并发请求，只能调用next()一步一步请求，* yield 对开发者不太友好，难以理解
方案六 async/await
async function getData() {const res1 = await requestData("why")const res2 = await requestData(res1 + "aaa")const res3 = await requestData(res2 + "bbb")const res4 = await requestData(res3 + "ccc")console.log(res4)
}
getData()
async 是generator的语法糖 内置执行器，无需手动执行next()方法
*/yield => async/await
优点：在generator 的基础上更加语义化，使用简单，无需执行next 方法 缺点：无法执行并发请求，必须有try catch才能捕获到异常
业务使用
Promise + async/await
async/await是基于generator的语法糖，返回的也是一个promise,所以返回值可以调用promise的方法。 当处理并发一般Promise.all + async/awit 结合使用
async function getData(){await Promise.all([requestData(a),requestData(b)])
}
总结
async await意义在于‘期望异步代码和同步代码可以流畅混淆而不至于被 then 分割’。同步代码不多的情况，async await和promise的使用可以取决于个人喜好。
async/await设计初衷并不是为了取代Promise，而是为了让使用Promise更加方便。
JS异步的发展历程是callback->promise/generator->async/await
这三种历程我认为并没有 相互优越的区别，而是有使用场景的区别
注册事件必须是用回调，async await 可以梳理平常的业务代码 更容易理解拆分业务 ，而generator 适用于需要暂停的业务逻辑，promise 适用于 构建通用异步函数
|