异步流程控制

随着JavaScript的快速发现,针对异步流程控制的方案也愈来愈多,如今常见主要有四种方案:es6

一、callback

回调函数的异步方案是咱们最熟悉不过的了,ES5中异步API大多采用这种形式,拿ajax举例:
好比咱们但愿xx2请求发生在xx1的请求完成以后,通常会是以下写法:
image.png
仔细观察不难发现这种实现方式的缺点,实现过程是一层层嵌套,若是有多个异步请求须要执行,那么它的嵌套层次将会很深,形成回调地狱,代码可读性很是差。ajax

二、promise

ES6中提出的promise语法糖对异步流程控制作了更好的封装,他提供更加优雅的方式来管理异步任务的执行,可让咱们以同步的方式编写异步代码。
image.pngpromise

三、generator

generator也是es6中新增的一种语法糖,它是一种特殊的函数,能够被用来作异步流程管理。
image.png
在上述示例中咱们定义了ajaxManage这个generator函数,可是当咱们调用该函数时他并无真正的执行其内部逻辑,而是会返回一个迭代器对象,generator函数的执行与普通函数不一样,只有调用迭代器对象的next方法时才会去真正执行咱们在函数体内编写的业务逻辑,且next方法的调用只会执行单个经过yieldreturn关键字所定义的状态,该方法的返回值是一个含有value以及done这两个属性的对象,value属性值为当前状态值,done属性值为false表示当前不是最终状态。咱们能够经过将异步任务定义为多个状态的方式,用generator函数的迭代器机制去管理这些异步任务的执行。这种方式虽然也是一种异步流程控制的解决方案,可是其缺陷在于咱们须要手动管理generator函数的迭代器执行,若是咱们须要控制的异步任务数量众多,那么咱们就须要屡次调用next方法,这显然也是一种不太好的开发体验。异步

四、async/await

async/awaites8中引入的一种处理异步流程控制的方案,它是generator函数的语法糖,可使异步操做更加简洁方便。
image.png
async/await相比promise代码更精简清晰,好比多个异步任务执行时,使用promise须要写不少的then调用,且每一个then方法中都要用一个function包裹异步任务。而async/await就不会有这个烦恼。此外,在异常处理,异步条件判断方面,async/await均可以节省不少代码。async

参考文章:
http://www.javashuo.com/article/p-davtkojg-h.html
https://juejin.im/entry/58a11f61128fe1005823a257函数

相关文章
相关标签/搜索