5种JS异步解决方案

回调、事件监听（发布订阅模式）、Promise、Generator、async/await

下面我们逐个分析

1、回调

早期常用的一步解决方案之一。可以简单的理解为一个函数最为参数传递个另外一个函数。

注意：回调不一定是一步的

 

下面是一个简单的例子

优点：简单，好理解
缺点：由于层层嵌套造成的回调地狱、代码不优雅、可读性差，不易维护；耦合度高。

 

2、事件监听----发布订阅模式
如我们在vue中事件的事件总线

 

优点：更符合模块化思想，我们在编写自己的监听器的时候可以做很多优化，从而更好的监听程序的运行。

缺点：程序变成了事件驱动，势必会影响流程，每次使用都要注册事件监听器然后触发，很麻烦，代码也不优雅。

3、Promise

es6引入了Promise对象，是一种异步编程的解决方案。

用同步的方式写异步代码，解决了回调地狱

Promise对象的状态一旦改变，就不会再改变，只有两种可能的改变。

由Pending（进行中）改为fulfilled（已解决）

由Pending（进行中）改为rejected（已失败）

 

 

4.Generator

Generator是一个特殊的函数；

Generator可以中途停止。

与普通函数不同，Generator 函数在函数之后和函数名称之前有一个" * "，函数有一个内部关键字 yield，函数调用后的返回值调用next方法。

优点：优雅的流程控制方法，允许函数被中断地执行。

缺点：Generator函数的执行必须依赖executor，对于只做异步处理还是不太方便。

5.async/await

ES2017标准引入了async函数，使得异步操作更加方便，它就是 Generator 函数的语法糖。async表示异步，await表示等待

async/await 目前被许多人认为是 js 中异步操作的终极和最优雅的解决方案

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

输出结果和上面的 Promise 实现是一样的，但是 async/await 的代码结构更清晰，和同步写法一样优雅、美观。

 

优点：语法规则简单、内置执行器，语义更好，适用性更广。

缺点：错误处理机制比较困难、误用 await 可能会导致性能问题，因为 await 会阻塞代码。