共计 7917 个字符，预计需要花费 20 分钟才能阅读完成。
为什么要学习异步编程？
在 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')运行后果：
是不是恍然大明确呢……