随着JavaScript
的快速发现,针对异步流程控制的方案也越来越多,现在常见主要有四种方案:
1、callback
回调函数的异步方案是我们最熟悉不过的了,ES5
中异步API
大多采用这种形式,拿ajax
举例:
比如我们希望xx2
请求发生在xx1
的请求完成之后,一般会是如下写法:
仔细观察不难发现这种实现方式的缺点,实现过程是一层层嵌套,如果有多个异步请求需要执行,那么它的嵌套层次将会很深,造成回调地狱,代码可读性非常差。
2、promise
ES6
中提出的promise
语法糖对异步流程控制做了更好的封装,他提供更加优雅的方式来管理异步任务的执行,可以让我们以同步的方式编写异步代码。
3、generator
generator
也是es6
中新增的一种语法糖,它是一种特殊的函数,可以被用来做异步流程管理。
在上述示例中我们定义了ajaxManage
这个generator
函数,但是当我们调用该函数时他并没有真正的执行其内部逻辑,而是会返回一个迭代器对象,generator
函数的执行与普通函数不同,只有调用迭代器对象的next
方法时才会去真正执行我们在函数体内编写的业务逻辑,且next
方法的调用只会执行单个通过yield
或return
关键字所定义的状态,该方法的返回值是一个含有value
以及done
这两个属性的对象,value
属性值为当前状态值,done
属性值为false
表示当前不是最终状态。我们可以通过将异步任务定义为多个状态的方式,用generator
函数的迭代器机制去管理这些异步任务的执行。这种方式虽然也是一种异步流程控制的解决方案,但是其缺陷在于我们需要手动管理generator
函数的迭代器执行,如果我们需要控制的异步任务数量众多,那么我们就需要多次调用next
方法,这显然也是一种不太好的开发体验。
4、async/await
async/await
是es8
中引入的一种处理异步流程控制的方案,它是generator
函数的语法糖,可以使异步操作更加简洁方便。async/await
相比promise
代码更精简清晰,比如多个异步任务执行时,使用promise
需要写很多的then
调用,且每个then
方法中都要用一个function
包裹异步任务。而async/await
就不会有这个烦恼。此外,在异常处理,异步条件判断方面,async/await
都可以节省很多代码。
参考文章:
https://juejin.im/post/5a2e21486fb9a0450407d370#heading-4
https://juejin.im/entry/58a11f61128fe1005823a257
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。