前言
在上篇我曾经讲过了JS世界是如何诞生的，然而如何能力让世界井井有条的运行起来呢？
本文将从万物初始讲起JS世界的运行规定，也就是事件循环，在这个过程中你就能明确为什么须要这些规定。有了规定JS世界能力稳稳的运行起来，所以这些规定十分重要，然而你真的理解它们了吗？
浏览本文前能够思考上面几个问题：
- 你了解中的事件循环是怎么的？
- 有宏工作了，为什么还要有微工作，它们又有什么关系？
promise十分重要，你能够手撕promise/A+标准了吗？async/await底层实现原理是什么？
本文将会由浅入深的解答这些问题
万物初始
本文基于chromium内核V8引擎解说
刚开始让万物运行是件挺容易的事件，毕竟刚开始嘛，也没什么简单事，比方有如下一系列工作：
- 工作1：1 + 2
- 工作2：3 / 4
- 工作3：打印出 工作1 和 工作2 后果
把工作转换成JS代码长这样：
function MainThread() { let a = 1 + 2; let b = 3 / 4; console.log(a + b)}JS世界拿到这个工作一看很简略啊：首先建一条流水线（一个单线程），而后顺次解决这三个工作，最初执行完后撤掉流水线（线程退出）就行了。
当初咱们的事件循环系统很容易就能解决这几个工作了，能够得出：
- 单线程解决了解决工作的问题：如果有一些确定好的工作，能够应用一个单线程来依照程序解决这些工作。
然而有一些问题：
- 但并不是所有的工作都是在执行之前统一安排好的，很多时候，新的工作是在线程运行过程中产生的
- 在线程执行过程中，想退出一个新工作，然而当初这个线程执行完以后记录的工作就间接退出了
世界循环运行
要想解决下面的问题，就须要引入循环机制，让线程继续运行，再来工作就能执行啦
转换成代码就像这样
function MainThread() { while(true){ ······ }}
当初的JS的事件循环系统就能继续运行起来啦：
- 循环机制解决了不能循环执行的问题：引入了循环机制，通过一个
while循环语句，线程会始终循环执行
不过又有其余问题呈现了：
- 别的线程要交给我这个主线程工作，并且还可能短时间内交给很多的工作。这时候该如何优化来解决这种状况呢？
工作放入队列
交给主线程的这些工作，必定得按肯定程序执行，并且还要得主线程闲暇能力做这些工作，所以就须要先将这些工作按程序存起来，等着主线程有空后一个个执行。
然而如何按顺序存储这些工作呢？
很容易想到用队列，因为这种状况合乎队列“先进先出”的特点，也就是说 要增加工作的话，增加到队列的尾部；要取出工作的话，从队列头部去取。
有了队列之后，主线程就能够从音讯队列中读取一个工作，而后执行该工作，主线程就这样始终循环往下执行，因而只有音讯队列中有工作，主线程就会去执行。
咱们要留神的是：
- JavaScript V8引擎是在渲染过程的主线程上工作的
后果如下图所示：
其实渲染过程会有一个IO线程：IO线程负责和其它过程IPC通信，接管其余过程传进来的音讯，如图所示：
咱们当初晓得页面主线程是如何接管内部工作了：
- 如果其余过程想要发送工作给页面主线程，那么先通过 IPC 把工作发送给渲染过程的 IO 线程，IO 线程再把工作发送给页面主线程
到当初，其实曾经实现chromium内核根本的事件循环系统了：
JavaScript V8引擎在渲染过程的主线程上工作- 主线程有循环机制，能在线程运行过程中，能接管并执行新的工作
- 交给主线程执行的工作会先放入工作队列中，期待主线程闲暇后顺次调用
- 渲染过程会有一个IO线程：IO线程负责和其它过程IPC通信，接管其余过程传进来的音讯
欠缺运行规定
当初曾经晓得：页面线程所有执行的工作都来自于工作队列。工作队列是“先进先出”的，也就是说放入队列中的工作，须要期待后面的工作被执行完，才会被执行。
这就导致两个问题了：
- 如何解决高优先级的工作？
- 如何解决执行工夫长的工作？
如何解决这两个问题呢？
解决高优先级的工作-微工作
以监听dom变动为例，如果dom变动则触发工作回调，然而如果将这个工作回调放到队列尾部，等到轮到它出队列，可能曾经过来一段时间了，影响了监听的实时性。并且如果变动很频繁的话，往队列中插入了这么多的工作，必然也升高了效率。
所以须要一种既能兼顾实时性，又能兼顾效率的办法。
解决方案V8引擎曾经给出了：在每个工作外部，开拓一个属于该工作的队列，把须要兼顾实时性和效率的工作，先放到这个工作外部的队列中期待执行，等到当前任务快执行完筹备退出前，执行该工作外部的队列。咱们把放入到这个非凡队列中的工作称为微工作。
这样既不会影响以后的工作又不会升高多少实时性。
如图所示以工作1为例：
能够总结一下：
- 工作队列中的工作都是宏观工作
- 每个宏观工作都有一个本人的宏观工作队列
- 微工作在以后宏工作中的
JavaScript快执行实现时，也就在V8引擎筹备退出全局执行上下文并清空调用栈的时候，V8引擎会查看全局执行上下文中的微工作队列，而后依照程序执行队列中的微工作。 V8引擎始终循环执行微工作队列中的工作，直到队列为空才算执行完结。也就是说在执行微工作过程中产生的新的微工作并不会推延到下个宏工作中执行，而是在以后的宏工作中继续执行。
咱们来看看微工作怎么产生？在古代浏览器外面，产生微工作只有两种形式。
- 第一种形式是应用
MutationObserver监控某个DOM节点，而后再通过JavaScript来批改这个节点，或者为这个节点增加、删除局部子节点，当 DOM 节点发生变化时，就会产生 DOM 变动记录的微工作。 - 第二种形式是应用
Promise，当调用Promise.resolve()或者Promise.reject()的时候，也会产生微工作。
而常见的宏工作又有哪些呢？
- 定时器类：
setTimeout、setInterval、setImmediate - I/O操作：比方读写文件
- 音讯通道：
MessageChannel
并且咱们要晓得：
- 宿主（如浏览器）发动的工作称为宏观工作
- JavaScript 引擎发动的工作称为宏观工作
解决执行工夫长的工作-回调
要晓得排版引擎 Blink和JavaScript引擎 V8都工作在渲染过程的主线程上并且是互斥的。
在单线程中，每次只能执行一个工作，而其余工作就都处于期待状态。如果其中一个工作执行工夫过久，那么下一个工作就要期待很长时间。
如果页面上有动画，当有一个JavaScript工作运行工夫较长的时候（比方大于16.7ms），主线程无奈交给排版引擎 Blink来工作，动画也就无奈渲染来，造成卡顿的成果。这当然是十分蹩脚的用户体验。想要防止这种问题，就须要用到回调来解决。
从底层看setTimeout实现
到当初曾经晓得了，JS世界是由事件循环和工作队列来驱动的。setTimeout大家都很相熟，它是一个定时器，用来指定某个函数在多少毫秒后执行。那浏览器是怎么实现setTimeout的呢？
要搞清楚浏览器是怎么实现setTimeout就先要弄明确两个问题：
setTimeout工作存到哪了？setTimeout到工夫后怎么触发？- 勾销
setTimeout是如何实现的？
setTimeout工作存到哪了
首先要分明，工作队列不止有一个，Chrome还保护着一个提早工作队列，这个队列保护了须要提早执行的工作，所以当你通过Javascript调用setTimeout时，渲染过程会将该定时器的回调工作增加到提早工作队列中。
回调工作的信息蕴含：回调函数、以后发动工夫、提早执行工夫
具体我画了个图：
setTimeout到工夫后怎么触发
当主线程执行完工作队列中的一个工作之后，主线程会对提早工作队列中的工作，通过以后发动工夫和提早执行工夫计算出曾经到期的工作，而后顺次的执行这些到期的工作，等到期的工作全副执行完后，主线程就进入到下一次循环中。具体呢我也画了个图：
ps：为了讲清楚，画配图好累哦,点个赞吧！
到这就分明setTimeout是如何实现的了：
setTimeout存储到提早工作队列中- 当主线程执行完工作队列中的一个工作后，计算提早工作队列中到期到工作，并执行所有到期工作
- 执行完所有到期工作后，让出主线程，进行下一次事件循环
手撕promise
promise十分重要，新退出的原生api和前端框架都大量应用了promise，promise未然成为前端的“水”和“电”。
promise解决了什么问题呢？promise解决的是异步编码格调的问题。
咱们来看，以前咱们的异步代码长这样：
let fs = require('fs');fs.readFile('./dellyoung.json',function(err,data){ fs.readFile(data,function(err,data){ fs.readFile(data,function(err,data){ console.log(data) }) })})层层嵌套，环环相扣，想拿到回调后果曾经够吃力了，如果还想进行错误处理。。。那几乎太难受了。
而promise呈现后，这些问题迎刃而解：
let fs = require('fs');function getFile(url){ return new Promise((resolve,reject)=>{ fs.readFile(url,function(error,data){ if(error){ reject(error) } resolve(data) }) })}getFile('./dellyoung.json').then(data=>{ return getFile(data) }).then(data=>{ return getFile(data) }).then(data=>{ console.log(data)}).catch(err=>{ // 对立错误处理 console.log(err)})几乎好用了太多。
能够发现，应用promise解决了异步回调的嵌套调用和错误处理的问题。
大家曾经晓得promise十分重要了，然而如何齐全学会promise呢？手撕一遍promise天然就贯通啦，咱们开始撕，在过程中抽丝剥茧。
promise/A+标准
咱们当初想写一个promise，然而谁来通知怎么才算一个合格的promise，不必放心，业界是通过一个规定指标来实现promise的，这就是Promise / A+，还有一篇翻译可供参考【翻译】Promises / A+标准。
接下来就开始逐渐实现吧！
同步的promise
先从一个最简略的promise实现开始
构造函数
先实现promise的地基：初始化用的构造函数
class ObjPromise { constructor(executor) { // promise状态 this.status = 'pending'; // resolve回调胜利，resolve办法里的参数值 this.successVal = null; // reject回调胜利，reject办法里的参数值 this.failVal = null; // 定义resolve函数 const resolve = (successVal) => { if (this.status !== 'pending') { return; } this.status = 'resolve'; this.successVal = successVal; }; // 定义reject const reject = (failVal) => { if (this.status !== 'pending') { return; } this.status = 'reject'; this.failVal = failVal; }; try { // 将resolve函数给使用者 executor(resolve, reject) } catch (e) { // 执行抛出异样时 reject(e) } }}咱们先写一个constructor用来初始化promise。
接下来剖析一下：
- 调用
ObjPromise传入一个函数命名为executor，executor函数承受两个参数resolve、reject，能够了解为别离代表胜利时的调用和失败时的调用。executor函数个别长这样(resolve,reject)=>{...} status代表以后promise的状态，有三种'pending'、'resolve'、'reject'（注：从状态机思考的话还有一个额定的初始状态，示意promise还未执行）successVal和failVal别离代表resolve回调和reject回调携带的参数值函数resolve：初始化的时候通过作为executor的参数传递给使用者，用来让使用者须要的时候调用，将status状态从'pending'改成'resolve'函数reject：初始化的时候通过作为executor的参数传递给使用者，将status状态从'pending'改成'reject'- 你可能还发现了
函数resolve和函数reject外面都有if (this.status !== 'pending') {return;}，这是因为resolve或reject只能调用一次，也就是status状态只能扭转一次。
then办法
then办法作用：拿到promise中的resolve或者reject的值。
1.根底版then办法
在class外面放上如下then办法：
then(onResolved, onRejected) { switch (this.status) { case "resolve": onResolved(this.successVal); break; case "reject": onRejected(this.failVal); break; }}来剖析一下：
- then办法能够传入两个参数，两个参数都是函数，俩函数就像这样
(val)=>{...} - 当
status状态为'resolve'则调用第一个传入的函数，传入的val为successVal - 当
status状态为'reject'则调用第二个传入的函数，传入的val为failVal
然而then办法还须要反对链式调用的，也就是说能够这样：
new Promise((resolve,reject)=>{ resolve(1);}).then((resp)=>{ console.log(resp); // 1}).then(()=>{ ...})2.使then办法反对链式调用
其实反对链式外围就是then办法要返回一个新的promise，咱们来革新一下实现反对链式调用。
then(onResolved, onRejected) { // 要返回一个promise对象 let resPromise; switch (this.status) { case "resolve": resPromise = new ObjPromise((resolve, reject) => { try{ // 传入的第一个函数 onResolved(this.successVal); resolve(); }catch (e) { reject(e); } }); break; case "reject": resPromise = new ObjPromise((resolve, reject) => { try{ // 传入的第二个函数 onRejected(this.failVal); resolve(); }catch (e) { reject(e); } }); break; } return resPromise;}再剖析一下：
- 当
status为'resolve'时，将promise胜利resolve的后果successVal，传递给第一个办法onResolved()，而后执行onResolved(this.successVal)函数 - 当
status为'reject'时，过程统一，就不多说啦 - 重点看它们都会把新创建的
promise赋值给then办法，执行完后then办法会返回这个新的promise，这样就能实现then的链式调用了
3.使then办法的链式调用能够传参
然而你没有发现一个问题，我then办法内的第一个参数，也就是onResolved()函数，函数外部的返回值应该是要可能传递给上面接着进行链式调用的then办法的，如下所示：
new Promise((resolve,reject)=>{ resolve(1);}).then((resp)=>{ console.log(resp); // 1 return 2; // <<< 关注这行}).then((resp)=>{ console.log(resp); // 2 承受到了参数2})这该如何实现呢？
其实很简略：
then(onResolved, onRejected) { // 定义这个变量保留要返回的promise对象 let resPromise; switch (this.status) { case "resolve": resPromise = new ObjPromise((resolve, reject) => { try{ // 传入的第一个函数 let data = onResolved(this.successVal); resolve(data); }catch (e) { reject(e); } }); break; case "reject": resPromise = new ObjPromise((resolve, reject) => { try{ // 传入的第二个函数 let data = onRejected(this.failVal); resolve(data); }catch (e) { reject(e); } }); break; } return resPromise;}很简略：
- 先保留函数执行的后果，也就是函数的返回值
- 而后，将返回值传递给新的用来返回的
promise的resolve()，就能够将返回值保留到新的promise的successVal - 执行出错的话，当然要将谬误传递给新的用来返回的
promise的reject()，将谬误保留到新的promise的failVal
4.then传入参数解决
再看看这段常见的代码：
new Promise((resolve,reject)=>{ resolve(1);}).then((resp)=>{ console.log(resp); // 1 return 2; }).then((resp)=>{ console.log(resp); // 2})能够看到，then办法的参数能够只传一个，持续来革新：
then(onResolved, onRejected) { const isFunction = (fn) => { return Object.prototype.toString.call(fn) === "[object Function]" }; onResolved = isFunction(onResolved) ? onResolved : (e) => e; onRejected = isFunction(onRejected) ? onRejected : err => { throw err }; ······}剖析一下：
- 判断传入参数的类型是不是函数
- 传入类型是函数的话，那没故障，间接用就行
- 传入类型不是函数的话，那蹩脚啦，咱们得别离用
(e) => e和(err)=>{throw err}来替换
到当初promise曾经能失常运行啦，代码如下：
class ObjPromise { constructor(executor) { // promise状态 this.status = 'pending'; // resolve回调胜利，resolve办法里的参数值 this.successVal = null; // reject回调胜利，reject办法里的参数值 this.failVal = null; // 定义resolve函数 const resolve = (successVal) => { if (this.status !== 'pending') { return; } this.status = 'resolve'; this.successVal = successVal; }; // 定义reject const reject = (failVal) => { if (this.status !== 'pending') { return; } this.status = 'reject'; this.failVal = failVal; }; try { // 将resolve函数给使用者 executor(resolve, reject) } catch (e) { // 执行抛出异样时 reject(e) } } then(onResolved, onRejected) { const isFunction = (fn) => { return Object.prototype.toString.call(fn) === "[object Function]" }; onResolved = isFunction(onResolved) ? onResolved : (e) => e; onRejected = isFunction(onRejected) ? onRejected : err => { throw err }; // 定义这个变量保留要返回的promise对象 let resPromise; switch (this.status) { case "resolve": resPromise = new ObjPromise((resolve, reject) => { try{ // 传入的第一个函数 let data = onResolved(this.successVal); resolve(data); }catch (e) { reject(e); } }); break; case "reject": resPromise = new ObjPromise((resolve, reject) => { try{ // 传入的第二个函数 let data = onRejected(this.failVal); resolve(data); }catch (e) { reject(e); } }); break; } return resPromise; }}你能够在控制台运行上面这个测试代码：
new ObjPromise((resolve,reject)=>{ resolve(1);}).then((resp)=>{ console.log(resp); // 1 return 2; }).then((resp)=>{ console.log(resp); // 2})控制台会顺次打印出 1 2。
5.then返回值解决
到当初同步promise代码曾经没问题啦，然而还不够，因为Promise/A+规定：then办法能够返回任何值，当然包含Promise对象，而如果是Promise对象，咱们就须要将他拆解，直到它不是一个Promise对象，取其中的值。
因为status状态为'resolve'和'reject'时都须要进行这样的解决，所以咱们就能够把处理过程封装成一个函数，代码如下：
then(onResolved, onRejected) { ··· let resPromise; switch (this.status) { case "resolve": resPromise = new ObjPromise((resolve, reject) => { try { // 传入的第一个函数 let data = onResolved(this.successVal); this.resolvePromise(data, resolve, reject); } catch (e) { reject(e); } }); break; case "reject": resPromise = new ObjPromise((resolve, reject) => { try { // 传入的第二个函数 let data = onRejected(this.failVal); this.resolvePromise(data, resolve, reject); } catch (e) { reject(e); } }); break; } return resPromise;}// data为返回值// newResolve为新的promise的resolve办法// newReject为新的promise的reject办法resolvePromise(data, newResolve, newReject) { // 判断是否是promise，不是间接resolve就行 if(!(data instanceof ObjPromise)){ return newResolve(data) } try { let then = data.then; const resolveFunction = (newData) => { this.resolvePromise(newData, newResolve, newReject); }; const rejectFunction = (err) => { newReject(err); }; then.call(data, resolveFunction, rejectFunction) } catch (e) { // 错误处理 newReject(e); }}剖析一下：
- 判断返回值类型，当不是
promise时，间接resolve就行 - 当是
promise类型时，用this.resolvePromise(newData, newResolve, newReject)来递归的调用then办法，直到data不为promise，而后resolve后果就行啦
6.解决then返回值循环援用
当初又有问题了:
如果新的promise呈现循环援用的话就永远也递归不到头了
看看执行上面这个代码：
let testPromise = new ObjPromise((resolve, reject) => { resolve(1);})let testPromiseB = testPromise.then((resp) => { console.log(resp); // 1 return testPromiseB;})会报错栈溢出。
解决这个问题的办法就是：通过给resolvePromise()办法传递以后新的promise对象，判断以后新的promise对象和函数执行返回值不同就能够了
class ObjPromise { constructor(executor) { // promise状态 this.status = 'pending'; // resolve回调胜利，resolve办法里的参数值 this.successVal = null; // reject回调胜利，reject办法里的参数值 this.failVal = null; // 定义resolve函数 const resolve = (successVal) => { if (this.status !== 'pending') { return; } this.status = 'resolve'; this.successVal = successVal; }; // 定义reject const reject = (failVal) => { if (this.status !== 'pending') { return; } this.status = 'reject'; this.failVal = failVal; }; try { // 将resolve函数给使用者 executor(resolve, reject) } catch (e) { // 执行抛出异样时 reject(e) } } resolvePromise(resPromise, data, newResolve, newReject) { if (resPromise === data) { return newReject(new TypeError('循环援用')) } if (!(data instanceof ObjPromise)) { return newResolve(data) } try { let then = data.then; const resolveFunction = (newData) => { this.resolvePromise(resPromise, newData, newResolve, newReject); }; const rejectFunction = (err) => { newReject(err); }; then.call(data, resolveFunction, rejectFunction) } catch (e) { // 错误处理 newReject(e); } } then(onResolved, onRejected) { const isFunction = (fn) => { return Object.prototype.toString.call(fn) === "[object Function]" }; onResolved = isFunction(onResolved) ? onResolved : (e) => e; onRejected = isFunction(onRejected) ? onRejected : err => { throw err }; // 定义这个变量保留要返回的promise对象 let resPromise; switch (this.status) { case "resolve": resPromise = new ObjPromise((resolve, reject) => { try { // 传入的第一个函数 let data = onResolved(this.successVal); this.resolvePromise(resPromise, data, resolve, reject); } catch (e) { reject(e); } }); break; case "reject": resPromise = new ObjPromise((resolve, reject) => { try { // 传入的第二个函数 let data = onRejected(this.failVal); this.resolvePromise(resPromise, data, resolve, reject); } catch (e) { reject(e); } }); break; } return resPromise; }}能够在控制台中调用如下代码试试啦：
new ObjPromise((resolve, reject) => { resolve(1);}).then((resp) => { console.log(resp); // 1 return 2}).then((resp) => { console.log(resp); // 2 return new ObjPromise((resolve, reject) => { resolve(3) })}).then((resp) => { console.log(resp); // 3});控制台会一次打印出 1 2 3
异步的promise
当初咱们实现了同步版的promise，然而很多状况下，promise的resolve或reject是被异步调用的，异步调用的话，执行到then()办法时，以后的status状态还是'pending'。这该如何改良代码呢？
思路其实很简略：
- 设置两个数组，别离存起来
then()办法的回调函数onResolved和onRejected - 当等到调用了
resolve或者reject时，执行对应数组内存入的回调函数即可 - 另外为了保障执行程序,期待以后执行栈执行实现，咱们还须要给
constructor的resolve和reject函数外面应用setTimeout包裹起来，防止影响以后执行的工作。
依据这个思路来革新一下promise：
class ObjPromise { constructor(executor) { // promise状态 this.status = 'pending'; // resolve回调胜利，resolve办法里的参数值 this.successVal = null; // reject回调胜利，reject办法里的参数值 this.failVal = null; // resolve的回调函数 this.onResolveCallback = []; // reject的回调函数 this.onRejectCallback = []; // 定义resolve函数 const resolve = (successVal) => { setTimeout(()=>{ if (this.status !== 'pending') { return; } this.status = 'resolve'; this.successVal = successVal; //执行所有resolve的回调函数 this.onResolveCallback.forEach(fn => fn()) }) }; // 定义reject const reject = (failVal) => { setTimeout(()=>{ if (this.status !== 'pending') { return; } this.status = 'reject'; this.failVal = failVal; //执行所有reject的回调函数 this.onRejectCallback.forEach(fn => fn()) }) }; try { // 将resolve函数给使用者 executor(resolve, reject) } catch (e) { // 执行抛出异样时 reject(e) } } // data为返回值 // newResolve为新的promise的resolve办法 // newReject为新的promise的reject办法 resolvePromise(resPromise, data, newResolve, newReject) { if (resPromise === data) { return newReject(new TypeError('循环援用')) } if (!(data instanceof ObjPromise)) { return newResolve(data) } try { let then = data.then; const resolveFunction = (newData) => { this.resolvePromise(resPromise, newData, newResolve, newReject); }; const rejectFunction = (err) => { newReject(err); }; then.call(data, resolveFunction, rejectFunction) } catch (e) { // 错误处理 newReject(e); } } then(onResolved, onRejected) { const isFunction = (fn) => { return Object.prototype.toString.call(fn) === "[object Function]" }; onResolved = isFunction(onResolved) ? onResolved : (e) => e; onRejected = isFunction(onRejected) ? onRejected : err => { throw err }; // 定义这个变量保留要返回的promise对象 let resPromise; switch (this.status) { case "resolve": resPromise = new ObjPromise((resolve, reject) => { try { // 传入的第一个函数 let data = onResolved(this.successVal); this.resolvePromise(resPromise, data, resolve, reject); } catch (e) { reject(e); } }); break; case "reject": resPromise = new ObjPromise((resolve, reject) => { try { // 传入的第二个函数 let data = onRejected(this.failVal); this.resolvePromise(resPromise, data, resolve, reject); } catch (e) { reject(e); } }); break; case "pending": resPromise = new ObjPromise((resolve, reject) => { const resolveFunction = () => { try { // 传入的第一个函数 let data = onResolved(this.successVal); this.resolvePromise(resPromise, data, resolve, reject); } catch (e) { reject(e); } }; const rejectFunction = () => { try { // 传入的第二个函数 let data = onRejected(this.failVal); this.resolvePromise(resPromise, data, resolve, reject); } catch (e) { reject(e); } }; this.onResolveCallback.push(resolveFunction); this.onRejectCallback.push(rejectFunction); }); break; } return resPromise; }}能够用上面代码测试一下：
new ObjPromise((resolve, reject) => { setTimeout(() => { resolve(1); }, 100)}).then((resp) => { console.log(resp); // 1 return 2}).then((resp) => { console.log(resp); // 2 return new ObjPromise((resolve, reject) => { resolve(3) })}).then((resp) => { console.log(resp); // 3});咱们当初曾经根本实现了Promise的then办法啦。
欠缺promise
到当初曾经实现了promise最外围的两个办法：constructor办法和then办法。不过Promise/A+还规定了一些其余的办法，咱们持续来实现。
catch办法
catch()办法就是能够通过回调函数拿到reject的值，这个好办，其实then办法曾经实现了，转接一下then办法就行了：
catch(onRejected) { return this.then(null, onRejected)}这样就实现了catch()办法
Promise.resolve()/reject()办法
大家必定都见过Promise.resolve()或者Promise.resolve()用法。其实作用就是返回一个新的promise，并且外部调用resolve或者reject。
ObjPromise.resolve = (val) => { return new ObjPromise((resolve, reject) => { resolve(val) })};ObjPromise.reject = (val) => { return new ObjPromise((resolve, reject) => { reject(val) })};通过这两种办法，咱们能够将现有的数据很不便的转换成promise对象
all办法
all办法也是很罕用的办法，它能够传入promise数组，当全副resolve或者有一个reject时，执行完结，当然返回的也是promise对象,来实现一下。
ObjPromise.all = (arrPromise) => { return new ObjPromise((resolve, reject) => { // 传入类型必须为数组 if(Array.isArray(arrPromise)){ return reject(new TypeError("传入类型必须为数组")) } // resp 保留每个promise的执行后果 let resp = new Array(arrPromise.length); // 保留执行实现的promise数量 let doneNum = 0; for (let i = 0; arrPromise.length > i; i++) { // 将以后promise let nowPromise = arrPromise[i]; if (!(nowPromise instanceof ObjPromise)) { return reject(new TypeError("类型谬误")) } // 将以后promise的执行后果存入到then中 nowPromise.then((item) => { resp[i] = item; doneNum++; if(doneNum === arrPromise.length){ resolve(resp); } }, reject) } })};来剖析一下：
- 传入
promise数组，返回一个新的promsie对象 resp用来保留所有promise的执行后果- 用
instanceof来判断是否是promise类型 - 通过调用每个
promise的then办法拿到返回值，并且要传入reject办法 - 用
doneNum来保留执行实现的promise数量，全副执行完后，通过resolve传递执行后果resp，并且将以后promise状态改为'resolve'，后续就能够通过then办法取值
race办法
race办法也偶然会用到，它能够传入promise数组，当哪个promise执行完，则race就间接执行完，咱们来实现一下：
ObjPromise.race = (arrPromise) => { return new Promise((resolve, reject) => { for (let i = 0; arrPromise.length > i; i++) { // 将以后promise let nowPromise = arrPromise[i]; if (!(nowPromise instanceof ObjPromise)) { return reject(new TypeError("类型谬误")) }; nowPromise.then(resolve, reject); } })};来剖析一下：
- 传入
promise数组，返回一个新的promsie对象 - 用instance来判断是否是
promise类型 - 调用每个
promise的then办法，并传递resolve、reject办法，哪个先执行完就间接完结了，后续就能够通过then办法取值
OK,到当初曾经实现了一个本人的promise对象！
从底层看async/await实现
手撕完promise，趁热再深刻学习一下ES7的新个性async/await。async/await相当牛逼：它是JavaScript 异步编程的一个重大改良，提供了在不阻塞主线程的状况下应用同步代码实现异步拜访资源的能力，并且使得代码逻辑更加清晰。接下来咱们就来深刻理解下async/await为什么能这么牛逼。async/await应用了Generator和Promise两种技术，Promise咱们曾经把握了，所以要再看一看Generator到底是什么。
生成器Generator
先理解一下生成器Generator是如何工作的，接着再学习Generator的底层实现机制——协程（Coroutine）
如何工作
生成器函数：生成器函数是一个带星号函数，而且是能够暂停执行和复原执行的
先来看上面这段代码：
function* genFun() { console.log("第一段") yield 'generator 1' console.log("第二段") return 'generator 2'}console.log('begin')let gen = genFun()console.log(gen.next().value)console.log('main 1')console.log(gen.next().value)console.log('main 2')执行这段代码，你会发现gen并不是一次执行完的，而是全局代码和gen代码交替执行。这其实就是生成器函数的个性，它能够暂停执行，也能够复原执行。
再来看下，它是具体是怎么暂停执行和复原执行的：
- 在生成器函数外部执行一段代码，如果遇到
yield关键字，那么JavaScript引擎将返回关键字前面的内容给内部，并暂停该函数的执行。 - 内部函数能够通过
next办法复原生成器函数的执行。
然而JavaScript引擎V8是如何实现生成器函数的暂停和复原呢，接着往下看
生成器原理
想要搞懂生成器函数如何暂停和复原，要先理解一下协程的概念，协程是一种比线程更加轻量级的存在，能够把协程看成是跑在线程上的工作：
- 一个线程上能够存在多个协程，然而在线程上同时只能执行一个协程。
- 如果从 A 协程启动 B 协程，咱们就把 A 协程称为 B 协程的父协程。
- 一个过程能够领有多个线程一样，一个线程也能够领有多个协程。
- 协程不是被操作系统内核所治理，而齐全是由程序所管制（也就是在用户态执行）。因而协程在性能上要远高于线程。
小知识点：线程 外围态，协程 用户态。也就是说线程被内核调度，协程是由用户的程序本人调度，零碎并不知道有协程的存在
上面我画了个图来演示下面代码的执行过程：
从图中联合代码能够看出协程的规定：
- 通过调用生成器函数
genFun来创立一个协程gen，创立之后，gen协程并没有立刻执行。 - 要让
gen协程执行，须要通过调用gen.next()。 - 当协程正在执行的时候，能够通过
yield关键字来暂停gen协程的执行，并返回次要信息给父协程。 - 如果协程在执行期间，遇到了
return，那么JavaScript引擎会完结以后协程，并将return前面的内容返回给父协程。
其实规定总的来说：
- 父协程中执行
next()，线程控制权就让给子协程了 - 子协程中遇到
yield，线程控制权就让给父协程了 - 能够看出父协程和子协程还是相互谦让的
然而用Generator生成器还是不太好用，咱们心愿写代码的时候，不要手动管制协程之间的切换，该切换时，JavaScript引擎帮我间接切换好多省事。这时候async/await就退场啦！
再看async/await
曾经晓得，async/await应用了Generator和Promise两种技术，其实往低层说就是微工作和协程的利用。当初Generator和Promise都曾经深刻了解啦。然而微工作和协程是如何合作实现了async/await呢？
1. async是什么：
MDN：async是一个通过异步执行并隐式返回Promise作为后果的函数。
能够执行上面代码：
async function foo() { return 1}console.log(foo()) // Promise {<resolved>: 1}能够看到调用async申明的foo()函数返回了一个Promise对象，并且状态是resolved。
2. await是什么：
MDN:await表达式会暂停以后async function的执行，期待Promise解决实现。 若Promise失常解决(fulfilled)，其回调的resolve函数参数作为await表达式的值，继续执行async function。 若Promise解决异样(rejected)，await表达式会把Promise的异样起因抛出。
先来看上面这段代码：
async function foo() { console.log(1) let a = await 99 console.log(a)}console.log(0)foo()console.log(3)想要晓得下面这段代码执行后果如何，就先看看这段代码的执行流程图，我曾经画进去了：
联合下面这张流程图，剖析一下下面代码的执行过程：
- 首先，执行
console.log(0)这个语句，打印进去0。 - 因为
foo函数是被async标记过的，所以当进入该函数的时候，JavaScript 引擎会保留父协程调用栈等信息，而后切换到子协程，执行foo函数中的console.log(1)语句，并打印出1。 - 当执行到
await 99时，会默认创立一个Promise 对象，如下：
let newPromise = new Promise((resolve,reject){ resolve(99)})并且在创立的过程中遇到了resolve(99)，JavaScript引擎会将该工作推入微工作队列。
- 而后
JavaScript引擎暂停以后子协程的执行，将主线程控制权交给父协程。并且还会把这个新创建的Promise返回给父协程 - 父协程拿到主线程控制权后，首先调用
newPromise.then，把回调函数放入到Promise中，这个回调函数是什么？其实就是相当于生成器函数的next()，调用这个回调函数会调用next()，会将父协程的控制权再交给子协程。 - 接下来继续执行父协程的流程，这里执行
console.log(3)，并打印进去3。 - 之后父协程将执行完结，在完结之前，会进入微工作的检查点，查看微工作，而后执行微工作队列，微工作队列中有
resolve(99)的工作期待执行。 - 执行
resolve(99)，触发了之前存入的回调函数，回调函数内有next()，父协程的控制权再交给子协程，并同时将value值99传给该子协程。 - 子协程
foo激活之后，会把接管到的value值99赋给了变量a，而后foo协程执行console.log(a)，打印出99，执行实现之后，将控制权归还给父协程。
下面的就是async/await具体的执行过程啦，能够看出JavaScript引擎帮咱们做了好多工作，能力让咱们将异步代码写成同步代码的格局。
参考
- 浏览器工作原理与实际
- Promise之你看得懂的Promise
- MDN-async
- MDN-await
小结
- 从零开始理解了JS世界的事件循环机制
- 明确了为什么会有微工作，以及宏工作与微工作的关系
- 把握了如何手撕合乎
Promise/A+标准的Promise - 晓得
async/await应用了Generator和Promise两种技术，也就是说它是微工作和协程的利用
看完两件事
- 欢送加我微信(iamyyymmm)，拉你进技术群，长期交流学习
- 关注公众号「呆鹅实验室」，和呆鹅一起学前端，进步技术认知