每天3分钟，重学ES6-ES12(十五)异步代码处理方案

前言

今天开始和大家一起系统的学习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 适用于 构建通用异步函数