为什么要学习异步编程？
在JS 代码中，异步无处不在，Ajax通信，Node中的文件读写等等等，只有搞清楚异步编程的原理和概念，能力在JS的世界中任意驰骋，轻易撒欢；
单线程 JavaScript 异步计划
首先咱们须要理解，JavaScript 代码的运行是单线程，采纳单线程模式工作的起因也很简略，最早就是在页面中实现 Dom 操作，如果采纳多线程，就会造成简单的线程同步问题，如果一个线程批改了某个元素，另一个线程又删除了这个元素，浏览器渲染就会呈现问题；
单线程的含意就是： JS执行环境中负责执行代码的线程只有一个；就相似于只有一个人干活；一次只能做一个工作，有多个工作天然是要排队的；
长处：平安，简略
毛病：遇到任务量大的操作，会阻塞，前面的工作会长工夫期待，呈现假死的状况；
为了解决阻塞的问题，Javascript 将工作的执行模式分成了两种，同步模式（ Synchronous）和 异步模式( Asynchronous)
前面咱们将分以下几个内容，来具体解说 JavaScript 的同步与异步：
1、同步模式与异步模式
2、事件循环与音讯队列
3、异步编程的几种形式
4、Promise 异步计划、宏工作/微工作队列
5、Generator 异步计划、 Async / Await语法糖
同步与异步
代码顺次执行，前面的工作须要期待后面工作执行完结后，才会执行，同步并不是同时执行，而是排队执行；
先来看一段代码：
console.log('global begin')function bar () { console.log('bar task')}function foo () { console.log('foo task') bar()}foo()console.log('global end')动画模式展示 同步代码 的执行过程：
代码会依照既定的语法规定，顺次执行，如果两头遇到大量简单工作，前面的代码则会阻塞期待；
再来看一段异步代码：
console.log('global begin')setTimeout(function timer1 () { console.log('timer1 invoke')}, 1800)setTimeout(function timer2 () { console.log('timer2 invoke') setTimeout(function inner () { console.log('inner invoke') }, 1000)}, 1000)console.log('global end')异步代码的执行，要绝对简单一些：
代码首先依照同步模式执行程，在下面的代码中，setTimeout 会开启环境运行时的执行线程运行相干代码，代码运行完结后，会将后果放入到音讯队列，期待 JS 线程完结后，音讯队列的工作再顺次执行；
流程图如下：
回调函数
通过上图，咱们会看到，在整个代码的执行中，JS 自身的执行仍然是单线程的，异步执行的最终后果，仍然须要回到 JS 线程上进行解决，在JS中，异步的后果 回到 JS 主线程 的形式采纳的是 “ 回调函数 ” 的模式 , 所谓的 回调函数 就是在 JS 主线程上申明一个函数，而后将函数作为参数传入异步调用线程，当异步执行完结后，调用这个函数，将后果以实参的模式传入函数的调用（也有可能不传参，然而函数调用肯定会有），后面代码中 setTimeout 就是一个异步办法，传入的第一个参数就是 回调函数，这个函数的执行就是音讯队列中的 “回调”；
上面咱们本人封装一个 ajax 申请，来进一步阐明回调函数与异步的关系
Ajax 的异步申请封装
function myAjax(url,callback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (this.readyState == 4) { if (this.status == 200) { // 胜利的回调 callback(null,this.responseText) } else { // 失败的回调 callback(new Error(),null); } } } xhr.open('get', url) xhr.send();}下面的代码，封装了一个 myAjax 的函数，用于发送异步的 ajax 申请，函数调用时，代码理论是依照同步模式执行的，当执行到 xhr.send() 时，就会开启异步的网络申请，向指定的 url 地址发送网络申请，从建设网络链接到断开网络连接的整个过程是异步线程在执行的；换个说法就是 myAjax 函数执行到 xhr.send() 后，函数的调用执行就曾经完结了，如果 myAjax 函数调用的前面有代码，则会继续执行，不会期待 ajax 的申请后果；
然而，myAjax 函数调用完结后，ajax 的网络申请却仍然在进行着，如果想要获取到 ajax 网络申请的后果，咱们就须要在后果返回后，调用一个 JS 线程的函数，将后果以实参的模式传入：
myAjax('./d1.json',function(err,data){ console.log(data);})回调函数让咱们轻松解决异步的后果，然而，如果代码是异步执行的，而逻辑是同步的； 就会呈现 “回调天堂”，举个栗子：
代码B须要期待代码A执行完结能力执行，而代码C又须要期待代码B，代码D又须要期待代码C，而代码 A、B、C都是异步执行的；
// 回调函数 回调天堂 myAjax('./d1.json',function(err,data){ console.log(data); if(!err){ myAjax('./d2.json',function(err,data){ console.log(data); if(!err){ myAjax('./d3.json',function(){ console.log(data); }) } }) }})没错，代码执行是异步的，然而异步的后果，是须要有强前后程序的，驰名的"回调天堂"就是这么诞生的;
相对来说，代码逻辑是固定的，然而，这个编码体验，要差很多，尤其在前期保护的时候，层级嵌套太深，让人头皮发麻；
如何让咱们的代码不在天堂中受苦呢？
有请 Promise 出山，援救程序员的头发；
Promise
Promise 译为 承诺、允诺、心愿，意思就是异步工作交给我来做，肯定(承诺、允诺)给你个后果；在执行的过程中，Promise 的状态会批改为 pending ，一旦有了后果，就会再次更改状态，异步执行胜利的状态是 Fulfilled , 这就是承诺给你的后果，状态批改后，会调用胜利的回调函数 onFulfilled 来将异步后果返回；异步执行胜利的状态是 Rejected， 这就是承诺给你的后果，而后调用 onRejected 阐明失败的起因(异样接管)；
将后面对 ajax 函数的封装，改为 Promise 的形式；
Promise 重构 Ajax 的异步申请封装
function myAjax(url) { return new Promise(function (resolve, reject) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (this.readyState == 4) { if (this.status == 200) { // 胜利的回调 resolve(this.responseText) } else { // 失败的回调 reject(new Error()); } } } xhr.open('get', url) xhr.send(); })}还是后面提到的逻辑，如果返回的后果中，又有 ajax 申请须要发送，可肯定记得应用链式调用，不要在then中间接发动下一次申请，否则，又是天堂见了：
// ==== Promise 误区====myAjax('./d1.json').then(data=>{ console.log(data); myAjax('./d2.json').then(data=>{ console.log(data) // ……回调天堂…… })})链式的意思就是在上一次 then 中，返回下一次调用的 Promise 对象，咱们的代码，就不会进天堂了；
myAjax('./d1.json') .then(data=>{ console.log(data); return myAjax('./d2.json')}) .then(data=>{ console.log(data) return myAjax('./d3.json')}) .then(data=>{ console.log(data);}) .catch(err=>{ console.log(err);})尽管咱们脱离了回调天堂，然而 .then 的链式调用仍然不太敌对，频繁的 .then 并不合乎天然的运行逻辑，Promise 的写法只是回调函数的改良，应用then办法当前，异步工作的两段执行看得更分明了，除此以外，并无新意。Promise 的最大问题是代码冗余，原来的工作被 Promise 包装了一下，不论什么操作，一眼看去都是一堆 then，原来的语义变得很不分明。于是，在 Promise 的根底上，Async 函数来了；
终极异步解决方案，千呼万唤的在 ES2017中公布了；
Async/Await 语法糖
Async 函数应用起来，也是很简略，将调用异步的逻辑全副写进一个函数中，函数后面应用 async 关键字，在函数中异步调用逻辑的后面应用 await ，异步调用会在 await 的中央期待后果，而后进入下一行代码的执行，这就保障了，代码的后续逻辑，能够期待异步的 ajax 调用后果了，而代码看起来的执行逻辑，和同步代码简直一样；
async function callAjax(){ var a = await myAjax('./d1.json') console.log(a); var b = await myAjax('./d2.json'); console.log(b) var c = await myAjax('./d3.json'); console.log(c) }callAjax();留神：await 关键词 只能在 async 函数外部应用
因为应用简略，很多人也不会探索其应用的原理，无非就是两个 单词，加到后面，用就好了，尽管会用，日常开发看起来也没什么问题，然而一遇到 Bug 调试，就凉凉，面试的时候也总是知其然不知其所以然，咱们先来一个面试题试试，你看你能运行出正确的后果吗？
async 面试题
请写出以下代码的运行后果：
setTimeout(function () { console.log('setTimeout')}, 0)async function async1() { console.log('async1 start') await async2(); console.log('async1 end')}async function async2() { console.log('async2')}console.log('script start')async1();console.log('script end')答案我放在最初面，你也能够本人写进去运行一下；
想要把后果搞清楚，咱们须要引入另一个内容：Generator 生成器函数；
Generator 生成器函数，返回 遍历器对象，先看一段代码：
Generator 根底用法
function * foo(){ console.log('test'); // 暂停执行并向外返回值 yield 'yyy'; // 调用 next 后，返回对象值 console.log(33);}// 调用函数 不会立刻执行，返回 生成器对象const generator = foo();// 调用 next 办法，才会 *开始* 执行 // 返回 蕴含 yield 内容的对象 const yieldData = generator.next();console.log(yieldData) //=> {value: "yyy", done: false}// 对象中 done ,示意生成器是否曾经执行结束// 函数中的代码并没有执行完结// 下一次的 next 办法调用，会从后面函数的 yeild 后的代码开始执行console.log(generator.next()); //=> {value: undefined, done: true}你会发现，在函数申明的中央，函数名后面多了 * 星号，函数体中的代码有个 yield ，用于函数执行的暂停；简略点说就是，这个函数不是个一般函数，调用后不会立刻执行全副代码，而是在执行到 yield 的中央暂停函数的执行，并给调用者返回一个遍历器对象，yield 前面的数据，就是遍历器对象的 value 属性值，如果要继续执行前面的代码，须要应用 遍历器对象中的 next() 办法，代码会从上一次暂停的中央持续往下执行；
是不是so easy 啊；
同时，在调用next 的时候，还能够传递参数，函数中上一次进行的 yeild 就会承受到以后传入的参数；
function * foo(){ console.log('test'); // 下次 next 调用传参承受 const res = yield 'yyy'; console.log(res);}const generator = foo();// next 传值 const yieldData = generator.next();console.log(yieldData) // 下次 next 调用传参，能够在 yield 承受返回值generator.next('test123');Generator 的最大特点就是让函数的运行，能够暂停，不要小看他，有了这个暂停，咱们能做的事件就太多，在调用异步代码时，就能够先 yield 停一下，停下来咱们就能够期待异步的后果了；那么如何把 Generator 写到异步中呢？
Generator 异步计划
将调用ajax的代码写到 生成器函数的 yield 前面，每次的异步执行，都要在 yield 中暂停，调用的返回后果是一个 Promise 对象，咱们能够从 迭代器对象的 value 属性获取到Promise 对象，而后应用 .then 进行链式调用解决异步后果，后果解决的代码叫做 执行器，就是具体负责运行逻辑的代码；
function ajax(url) { ……}// 申明一个生成器函数function * fun(){ yield myAjax('./d1.json') yield myAjax('./d2.json') yield myAjax('./d3.json')}// 返回 遍历器对象 var f = fun();// 生成器函数的执行器 // 调用 next 办法，执行异步代码var g = f.next();g.value.then(data=>{ console.log(data); // console.log(f.next()); g = f.next(); g.value.then(data=>{ console.log(data) // g....... })})而执行器的逻辑中，是雷同嵌套的，因而能够写成递归的形式对执行器进行革新：
// 申明一个生成器函数function * fun(){ yield myAjax('./d1.json') yield myAjax('./d2.json') yield myAjax('./d3.json')}// 返回 遍历器对象 var f = fun();// 递归形式 封装// 生成器函数的执行器function handle(res){ if(res.done) return; res.value.then(data=>{ console.log(data) handle(f.next()) })}handle(f.next());而后，再将执行的逻辑，进行封装复用，造成独立的函数模块；
function co(fun) { // 返回 遍历器对象 var f = fun(); // 递归形式 封装 // 生成器函数的执行器 function handle(res) { if (res.done) return; res.value.then(data => { console.log(data) handle(f.next()) }) } handle(f.next());}co(fun);封装实现后，咱们再应用时，只须要关注 Generator 中的 yield 局部就行了
function co(fun) { ……}function * fun(){ yield myAjax('./d1.json') yield myAjax('./d2.json') yield myAjax('./d3.json')}此时你会发现，应用 Generator 封装后，异步的调用就变的非常简单了，然而，这个封装还是有点麻烦，有大神帮咱们做了这个封装，相当弱小：https://github.com/tj/co ，感兴趣看一钻研一下，而随着 JS 语言的倒退，更多的人心愿相似 co 模块的封装，可能写进语言规范中，咱们间接应用这个语法规定就行了；
其实你也能够比照一下，应用 co 模块后的 Generator 和 async 这两段代码：
// async / await async function callAjax(){ var a = await myAjax('./d1.json') console.log(a); var b = await myAjax('./d2.json'); console.log(b) var c = await myAjax('./d3.json'); console.log(c) } // 应用 co 模块后的 Generator function * fun(){ yield myAjax('./d1.json') yield myAjax('./d2.json') yield myAjax('./d3.json')}你应该也发现了，async 函数就是 Generator 语法糖，不须要本人再去实现 co 执行器函数或者装置 co 模块，写法上将 * 星号 去掉换成放在函数后面的 async ，把函数体的 yield 去掉，换成 await； 完满……
async function callAjax(){ var a = await myAjax('./d1.json') console.log(a); var b = await myAjax('./d2.json'); console.log(b) var c = await myAjax('./d3.json'); console.log(c) }callAjax();咱们再来看一下 Generator ，置信上面的代码，你能很轻松的浏览；
function * f1(){ console.log(11) yield 2; console.log('333') yield 4; console.log('555')}var g = f1();g.next();console.log(666);g.next();console.log(777);代码运行后果：
带着 Generator 的思路，咱们再回头看看那个 async 的面试题；
请写出以下代码的运行后果：
setTimeout(function () { console.log('setTimeout')}, 0)async function async1() { console.log('async1 start') await async2(); console.log('async1 end')}async function async2() { console.log('async2')}console.log('script start')async1();console.log('script end')运行后果：
是不是恍然大明确呢……