在js中有一个始终无法绕过的问题，如何优雅地解决异步问题。实际上，js在执行过程中，每遇到一个异步函数，都会将这个异步函数放入一个异步队列中，只有当同步线程执行结束之后，才会开始执行异步队列中的函数，这个是讨论解决异步方案的前提。
解决问题的方法
主流的解决方法主要有以下几种：
- 回调函数
- 事件触发
- 发布/订阅者模式
- promise
- generate
方法介绍
回调函数
回调函数应该属于最简单粗暴的一种方式，主要表现为在异步函数中将一个函数进行参数传入，当异步执行完成之后执行该函数
这种写法最大的问题是：如果存在这样的一个业务场景，有三个异步函数A,B,C，其中B的执行需要在A执行结束之后，C的执行需要在B之后，这样的场景模拟成代码就是（jquery中ajax方法为例）
试想，如果再多几个异步函数，代码整体的维护性，可读性都变的极差，如果出了bug，修复的排查过程也变的极为困难，这个便是所谓的 回调函数地狱。
事件监听
事件监听最常用的常见在于DOM元素事件绑定触发，如果我们想在DOM元素与用户进行鼠标或其他交互之后执行某些逻辑，就可以使用事件监听了
引申开来，我们可以创建一个Event类，定义on和emit方法来绑定和触发自定义事件
同样回到在回调函数上遇到的难题，遇到多层嵌套的异步问题，使用事件触发的方法如何进行解决？
嗯，从写法上来看，相比于回调函数，整洁了一些。
发布/订阅者模式
订阅发布模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某发布者对象。这个发布者对象在自身状态变化时，会通知所有订阅者对象，使它们能够自动更新自己的状态。vue就是基于发布/订阅者模式。
如何通过代码实现一个发布/订阅者模式？
引用了《Pro JavaScript Design Patterns》第15章的例子
//创建一个主题发布类
var Publisher=function(){
this.subscribers=[]
}
Publisher.prototype.publish=function(data){
this.subscribers.forEach(function(fn){
fn(data)
})
}
/*
在Function上挂载这个些方法，所有的函数都可以调用这些方法
表示所有函数都可以订阅/取消订阅相关的主题发布
*/
//订阅
Function.prototype.subscribe=function(publisher){
var that=this;
var isExist=publisher.subscribers.some(function(el){
if(el===that){
return true
}
})
if(!isExist){
publisher.subscribers.push(that)
}
//return this是为了支持链式调用
return this
}
//取消订阅
Function.prototype.unsubscribe=function(publisher){
var that=this;
//就是将函数从发布者的订阅者列表中进行删除
publisher.subscribers=publisher.subscribers.filter(function(el){
if(el!==that){
return true
}
})
return this
}
var publisher=new Publisher();
var subscriberObj=function(data){
console.log(data)
}
subscriberObj.subscribe(publisher)
这样就实现了一个简单的发布订阅者模式，每次发布者发布新内容时，就会调用publish方法，然后将内容作为参数，依次调用订阅者函数（subscribers）。
其实，发布/订阅模式与事件监听很类似，
- 事件监听是将一个回调函数和事件绑定在一起，触发了相应事件，就会执行相应的回调函数
- 发布/订阅模式是将订阅函数放入了发布者的订阅者列表中，更新时，遍历订阅者列表，执行所有的订阅者函数
promise
promise由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
简单来讲，就还是promise中有着三种状态pending,fulfilled,rejected。在代码中我们可以控制状态的变更
创建一个Promise对象需要传入一个函数，函数的参数是resolve和reject，在函数内部调用时，就分别代表状态由pending=>fulfilled(成功)，pending=>rejected(失败)
一旦promise状态发生变化之后，之后状态就不会再变了。比如：调用resolve之后，状态就变为fulfilled，之后再调用reject,状态也不会变化
Promise对象在创建之后会立刻执行，因此一般的做法是使用一个函数进行包装，然后return一个promise对象
function timeout(){
return new Promise(function(resolve,reject){
...//异步操作
})
}
在使用时可以通过promise对象的内置方法then进行调用，then有两个函数参数，分别表示promise对象中调用resolve和reject时执行的函数
function timeout(){
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve();
},1000)
})
}
timeout()
.then(function(){
...//对应resolve时执行的逻辑
},function(){
...//对应reject时执行的逻辑
})
可以使用多个then来实现链式调用,then的函数参数中会默认返回promise对象
timeout()
.then(function(){
...//对应resolve时执行的逻辑
},function(){
...//对应reject时执行的逻辑
})
.then(function(){
...//上一个then返回的promise对象对应resolve状态时执行的逻辑
},function(){
...//上一个then返回的promise对象对应reject状态时执行的逻辑
})
使用promise来解决回调地狱的做法就是使用then的链式调用
function fnA(){
return new Promise(resolve=>{
...//异步操作中resolve
})
}
function fnB(){
return new Promise(resolve=>{
...//异步操作中resolve
})
}
function fnC(){
return new Promise(resolve=>{
...//异步操作中resolve
})
}
fnA()
.then(()=>{
return fnB()
})
.then(()=>{
return fnC()
})
清晰直观了许多
generate函数
创建一个generate函数很简单
function* gen(){
yield 1
yield 2
return 3
}
区别于普通函数的地方在于function后面的*号，以及函数内部的yield。
*号是定义方式，带有 * 号表示是一个generate函数，yield是其内部独特的语法。
function* gen(){
yield 1
yield 2
return 3
}
let g=gen();
console.log(g.next())//{value:1,done:false}
console.log(g.next())//{value:2,done:false}
console.log(g.next())//{value:3,done:true}
console.log(g.next())//{value:undefined,done:true}
调用generate函数会生成一个遍历器对象，不会立即执行，需要调用next执行，执行到带有yield的那一步，next会返回一个对象，对象中value表示yield或return后的值，done表示函数是否已经执行结束（是否已经执行到return）。之后每次执行next都会从上一个yield开始继续执行
function* gen(){
let res=yield 1
yield res
return 3
}
let g=gen();
console.log(g.next())//{value:1,done:false}
console.log(g.next(333))//{value:333,done:false}
在next中传入参数会作为上一次yield的返回值（会忽略第一个next中传递的参数）
但是如何使用generate函数来进行异步编程？
这里可以使用ES2017中的async和await语法（其实属于generate函数的语法糖）
使用async替换*号，使用await替换yield就将generate函数改造成了一个async函数
async function test(){
await 1
await asyncFn()
}
test()
其中await后面可以跟promise和原始数据类型（相当与同步操作），而async返回一个promise对象（因此可以使用then进行链式调用）,使用时直接调用就行了
我们再来看看如何解决回调地狱的问题
function fnA(){
return new Promise(resolve=>{
...//异步操作中resolve
})
}
function fnB(){
return new Promise(resolve=>{
...//异步操作中resolve
})
}
function fnC(){
return new Promise(resolve=>{
...//异步操作中resolve
})
}
async function gen(){
let resA=await fnA()
let resB=await fnB(resA)
let resC=await fnC(resB)
}
gen()
相比于之前的方法更简单直观，也更容易理解整体的代码流程。
作者：醉里挑灯看剑_0696
链接：https://www.jianshu.com/p/80dcd01d415e
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。