对于Promise，相信大多数人都已经了解并且可以熟练的使用它的各种方法，但是追究它的底层原理，可能并不清楚，这篇文章是自己在经过一段时间的学习后写出来的，里面包含了自己对Promise的理解，并且按照步骤一步一步的手写了Promise以及then方法，希望这篇文章可以帮助到你们。
学习Promise
Promise的含义
Promise 是异步编程的一种解决方案，ES6将其写进了语言标准。所谓Promise就是一个容器，里面保存着未来才会结束的事件（通常是一个异步操作）的结果。
Promise对象有以下两个特点：
- 对象的状态不受外界影响。
Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled/resolved（已成功）、rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。 - 一旦状态改变，就不会再改变，任何时候都可以得到这个结果。
Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。
Promise的优点：
可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
基本用法
ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。
const promise = new Promise((resolve,reject)=>{//此处执行一些异步操作（调用后台API，定时器等） if(/*异步操作成功*/){ resolve(value); }else{ reject(error) }}) //其中两个函数的参数值分别为成功和失败后想要传递的结果复制代码 Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
promise.then(res=>{ //对于成功回调接受的数据做处理},err=>{ //对于失败的回调数据做处理})复制代码 注：Promise新建后就会立即执行。
Promise.prototype.then() Promise实例具有then方法，也就是说，then方法是定义在原型对象上Promise.prototype上的，它的作用是为 Promise实例添加状态改变时的回调函数。前面说过，then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。
then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。第一个回调函数完成以后，会将返回结果作为参数，春如第二个回调函数。
采用链式的 then，可以指定一组按照次序调用的回调函数。（ES7中的async/await）也可以实现链式调用，除此之外，Promise的all方法可以实现并行执行。
了解了基础的 Promise和 then之后，我们便可以自己创建一个 Promise。
手写Promise
首先写 Promise构造函数，由以上Promise的使用可知，其参数为一个函数，又被称为执行器函数（executor），并且执行器函数会被立即调用，执行器函数也会接收两个参数，且这两个参数均为函数。
function Promise(executor) { executor(resolve, reject);}复制代码 Promise最重要的方法就是then方法，因此为了能够让实例调用这个方法，我们必须将这个方法写在其原型链上，并且它接受两个参数，一个为成功的回调，一个为失败得回调。
Promise.prototype.then=function(onResolved,onRejected){ }复制代码 之后继续写Promise函数，因为new出来的实例具有默认的状态pending，之后通过执行器executor执行 resolve和reject两个函数来修改状态。
function Promise(executor) { let self=this; //保留this。防止后面方法出现this只想不明的问题 self.status='pending'; //promise的默认状态是pending function resolve(){ self.status='resolved'; //成功函数将其状态修改为resolved } function reject(){ self.status='rejected'; //失败函数将其函数修改为rejected } executor(resolve, reject);}复制代码 为了保证 Promise实例状态一旦变更不能再次改变，需要进行判断
function Promise(executor) { let self = this; //保留this。防止后面方法出现this只想不明的问题 self.status = 'pending'; //promise的默认状态是pending self.success = undefined; //保存成功回调传递的值 self.error = undefined; //保存失败回调传递的值 function resolve() { if (self.status === 'pending') { self.status = 'resolved'; //成功函数将其状态修改为resolved } } function reject() { if (self.status === 'pending') { self.status = 'rejected'; //失败函数将其函数修改为rejected } } executor(resolve, reject);}复制代码 之后需要将调用之后的成功或失败的结果保存起来
function Promise(executor) { let self = this; //保留this。防止后面方法出现this只想不明的问题 self.status = 'pending'; //promise的默认状态是pending self.success = undefined; //保存成功回调传递的值 self.error = undefined; //保存失败回调传递的值 function resolve(success) { if (self.status === 'pending') { self.status = 'resolved'; //成功函数将其状态修改为resolved self.success=success; //将成功的值保存起来 } } function reject(error) { if (self.status === 'pending') { self.status = 'rejected'; //失败函数将其函数修改为rejected self.error=error; //将失败的值保存起来 } } executor(resolve, reject);}复制代码 在这里举一个实际的例子（Express使用Promise保存的需要返回的值）
注意：该例子涉及到了异步函数处理，链式调用，放在此处只是为了说明上面的概念。
当执行器调用 resolve函数后，then中的第一个参数函数（成功回调）会执行，并将保存的值传递给then中的第一个函数作为参数，同时当执行器调用 reject函数后，then中的第二个参数函数（失败回调）会执行，并将保存的值传递给then中的第二个函数作为参数。
Promise.prototype.then = function (onResolved, onRejected) { let self = this; if (self.status === 'resolved'); { onResolved(self.success); //将resolve函数保留的成功值传递作为参数 } if (self.status === 'rejected') { onRejected(self.error); //将reject函数保留的失败值传递作为参数 }}复制代码 对应于上面的例子，举出其then的使用
到此为止Promise的简单结构已经基本完成，简单测试
let promise = new Promise((resolve, reject) => { console.log('start'); resolve('success data');})promise.then(res => { console.log("res", res);}, err => { console.log("err", err);})复制代码 测试结果
startres success data复制代码
以上步骤只是实现了同步处理，接下来实现异步处理以及实现一个实例多次调用then方法（不是链式调用）
因为 js是单线程的，简单理解浏览器端的事件循环即为先执行同步任务，后执行异步任务。同步任务是存放在调用栈中的，主线程会先执行同步任务，当调用栈中的同步任务全都执行完毕且主线程为空时，主线程会去任务队列中查找是否有已经注册的异步任务的回调函数，有则执行，无则等待。任务队列中的异步任务又分为微任务和宏任务，这两者也有相应的执行顺序。详细介绍可以等下篇文章
言归正传，实现异步处理及多次调用
如果Promise处理的为一个异步函数，那么当then的时候，执行器函数中的参数会被放到异步任务队列中，即为此时Promise的实例仍为默认状态pending，没有改变，那么我们此时并不知道要去执行then中的成功回调函数还是失败回调函数，在不知道哪个回调函数会被执行的情况下，就需要把这两个回调函数保存起来，等到时机成熟，确定哪个函数的时候，再拿出来调用。
function Promise(executor) { let self = this; //保留this。防止后面方法出现this只想不明的问题 self.status = 'pending'; //promise的默认状态是pending self.success = undefined; //保存成功回调传递的值 self.error = undefined; //保存失败回调传递的值 self.onSuccessCallbacks = []; //存放成功的回调 self.onErrorCallbacks = []; //存放失败的回调 function resolve(success) { if (self.status === 'pending') { self.status = 'resolved'; //成功函数将其状态修改为resolved self.success = success; //将成功的值保存起来 self.onSuccessCallbacks.forEach(element => { element(); }); } } function reject(error) { if (self.status === 'pending') { self.status = 'rejected'; //失败函数将其函数修改为rejected self.error = error; //将失败的值保存起来 self.onErrorCallbacks.forEach(element => { element(); }) } } executor(resolve, reject);}Promise.prototype.then = function (onResolved, onRejected) { let self = this; if (self.status === 'pending') { self.onSuccessCallbacks.push(() => { onResolved(self.success); //将resolve函数保留的成功值传递作为参数 }) self.onErrorCallbacks.push(() => { onRejected(self.error); //将reject函数保留的失败值传递作为参数 }) } if (self.status === 'resolved') { onResolved(self.success); //将resolve函数保留的成功值传递作为参数 } if (self.status === 'rejected') { onRejected(self.error); //将reject函数保留的失败值传递作为参数 }}复制代码 测试用例
let promise = new Promise((resolve, reject) => { setTimeout(function () { resolve('success data') }, 2000)})promise.then(res => { console.log("success:", res);}, err => { console.log("error:", err);})promise.then(res => { console.log("success:", res);}, err => { console.log("error:", err);})复制代码 测试结果为2秒后出现结果
success: success datasuccess: success data复制代码
继续进行尝试，如果让Promise抛出一个错误如何处理
let promise = new Promise((resolve, reject) => { throw new error("一个错误");})promise.then(res => { console.log("success:", res);}, err => { console.log("error:", err);})复制代码 结果：
解决该问题
try { executor(resolve, reject); } catch (err) { reject(err); }复制代码 再次尝试，查看结果
executor函数进行异常处理，如果出错了就直接进入 reject方法。 完成上面的一系列完善之后，最后我们实现Promise的链式调用。
Promise实现链式调用就是通过then方法返回一个新的Promise。
如果返回的是一个Promise函数，那么会等待这个Promise执行完成之后再返回给下一次的then，Promise如果成功，就会走下一次then的成功，如果失败就会走下一次then的失败。
注意：then方法中返回的回调函数不能是自己本身，如果真的这样写，那么函数执行到里面时会等待promise的结果，这样一层层的状态等待就会形成回调地狱。
接下来一步步分析（只需要改进then函数即可）
then函数中嵌套new Promise
之后主要为resolvePromise函数，对x进行判断，做出相应的操作：
到此基本功能已经完成，以下为源码以及测试例子及结果
源码：
//Promise函数function Promise(executor) { let self = this; //保留this。防止后面方法出现this只想不明的问题 self.status = 'pending'; //promise的默认状态是pending self.success = undefined; //保存成功回调传递的值 self.error = undefined; //保存失败回调传递的值 self.onSuccessCallbacks = []; //存放成功的回调 self.onErrorCallbacks = []; //存放失败的回调 function resolve(success) { if (self.status === 'pending') { self.status = 'resolved'; //成功函数将其状态修改为resolved self.success = success; //将成功的值保存起来 self.onSuccessCallbacks.forEach(element => { element(); }); } } function reject(error) { if (self.status === 'pending') { self.status = 'rejected'; //失败函数将其函数修改为rejected self.error = error; //将失败的值保存起来 self.onErrorCallbacks.forEach(element => { element(); }) } } try { executor(resolve, reject); } catch (err) { reject(err); }}//then函数Promise.prototype.then = function (onResolved, onRejected) { let self = this; let promiseAgain = new Promise((resolve, reject) => { if (self.status === 'pending') { self.onSuccessCallbacks.push(() => { let x = onResolved(self.success); //将resolve函数保留的成功值传递作为参数 resolvePromise(promiseAgain, x, resolve, reject); }) self.onErrorCallbacks.push(() => { let x = onRejected(self.error); //将reject函数保留的失败值传递作为参数 resolvePromise(promiseAgain, x, resolve, reject); }) } if (self.status === 'resolved') { let x = onResolved(self.success); //将resolve函数保留的成功值传递作为参数 resolvePromise(promiseAgain, x, resolve, reject); } if (self.status === 'rejected') { let x = onRejected(self.error); //将reject函数保留的失败值传递作为参数 resolvePromise(promiseAgain, x, resolve, reject); } }) return promiseAgain;}//resolvePromise函数function resolvePromise(promiseAgain, x, resolve, reject) { if (promiseAgain === x) { return reject(new TypeError("循环调用")); } if (x !== null && (typeof x === 'object' || typeof x === 'function')) { try { let then = x.then; if (typeof then === 'function') { then.call(x, (y) => { resolvePromise(promiseAgain, y, resolve, reject); }, (e) => { reject(e); }) } else { resolve(x); } } catch (error) { reject(error); } } else { resolve(x); }}module.exports = Promise;复制代码 测试示例：
let Promise = require('./Promise');let promise = new Promise((resolve, reject) => { setTimeout(function () { resolve('success data') }, 2000)})promise.then(res => { console.log("第一次调用", res); return res; }, err => { console.log("error:", err); }) .then(res => { console.log("第二次调用",res); return res }, err => { console.log("err", err); }) .then(res => { console.log("第三次调用",res); }, err => { console.log("err", err); })复制代码 测试结果：
第一次调用 success data第二次调用 success data第三次调用 success data复制代码
使用过Promise，我们随口而出即为Promise为异步函数，其实Promise在实例化（new的过程）的时候是同步的，而then中注册的回调才是异步执行的。
let Promise = require('./Promise');let promise = new Promise((resolve, reject) => { console.log("其次会被执行"); resolve("success data");})promise.then(res => { console.log("第一次调用", res); // return res; }, err => { console.log("error:", err); })console.log("首先会被执行");复制代码 执行结果：
其次会被执行第一次调用 success data首先会被执行复制代码
最终代码：
//Promise函数function Promise(executor) { let self = this; //保留this。防止后面方法出现this只想不明的问题 self.status = 'pending'; //promise的默认状态是pending self.success = undefined; //保存成功回调传递的值 self.error = undefined; //保存失败回调传递的值 self.onSuccessCallbacks = []; //存放成功的回调 self.onErrorCallbacks = []; //存放失败的回调 function resolve(success) { if (self.status === 'pending') { self.status = 'resolved'; //成功函数将其状态修改为resolved self.success = success; //将成功的值保存起来 self.onSuccessCallbacks.forEach(element => { element(); }); } } function reject(error) { if (self.status === 'pending') { self.status = 'rejected'; //失败函数将其函数修改为rejected self.error = error; //将失败的值保存起来 self.onErrorCallbacks.forEach(element => { element(); }) } } try { executor(resolve, reject); } catch (err) { reject(err); }}//then函数Promise.prototype.then = function (onResolved, onRejected) { onResolved = typeof onResolved == 'function' ? onResolved : val => val; onRejected = typeof onRejected == 'function' ? onRejected : err => { throw err; } let self = this; let promiseAgain = new Promise((resolve, reject) => { if (self.status === 'pending') { self.onSuccessCallbacks.push(() => { try { let x = onResolved(self.success); //将resolve函数保留的成功值传递作为参数 resolvePromise(promiseAgain, x, resolve, reject); } catch (e) { reject(e) } }) self.onErrorCallbacks.push(() => { try { let x = onRejected(self.error); //将reject函数保留的失败值传递作为参数 resolvePromise(promiseAgain, x, resolve, reject); } catch (e) { reject(e) } }) } if (self.status === 'resolved') { try { let x = onResolved(self.success); //将resolve函数保留的成功值传递作为参数 resolvePromise(promiseAgain, x, resolve, reject); } catch (e) { reject(e) } } if (self.status === 'rejected') { try { let x = onRejected(self.error); //将reject函数保留的失败值传递作为参数 resolvePromise(promiseAgain, x, resolve, reject); } catch (e) { reject(e) } } }) return promiseAgain;}//resolvePromise函数function resolvePromise(promiseAgain, x, resolve, reject) { if (promiseAgain === x) { return reject(new TypeError("循环调用")); } if (x !== null && (typeof x === 'object' || typeof x === 'function')) { try { let then = x.then; if (typeof then === 'function') { then.call(x, (y) => { resolvePromise(promiseAgain, y, resolve, reject); }, (e) => { reject(e); }) } else { resolve(x); } } catch (error) { reject(error); } } else { resolve(x); }}module.exports = Promise;复制代码 测试实例：
let Promise = require('./Promise');let promise = new Promise((resolve, reject) => { setTimeout(function () { resolve('success data') }, 0)})promise.then(res => { console.log("第一次调用", res); return res; }, err => { console.log("error:", err); }) .then(res => { console.log("第二次调用",res); return res }, err => { console.log("err", err); }) .then(res => { console.log("第三次调用",res); }, err => { console.log("err", err); })console.log("首先会被执行");复制代码 测试结果：
首先会被执行第一次调用 success data第二次调用 success data第三次调用 success data复制代码
此篇文章只是自己在了解Promise源码之后，结合自己的理解写下的，希望这篇文章可以有所帮助。
在最后推荐一下各位读者在了解Promise的时候，可以了解一下浏览器的事件循环，这对于一段混杂着setTimeOut，Promise的输出顺序有好大的帮助，这里推荐一篇文章，之后逼着可能也会写一下浏览器的事件循环文章。