媒介
说到 ES6，Promise 是绕不过的题目；假如说 ES6 的 Class 是基于 Javascript 原型继承的封装，那末 Promise 则是对 callback 回调机制的革新。这篇文章，不谈 Promise 的现实运用；聊一下 Promise 的完成道理，从最简朴的处理方案入手，一步一步的本身完成一个 SimplePromise。
正文
入门
从最简朴的 Promise 初始化和运用入手：
const pro = new Promise ((res, rej) => {})
pro.then(data => {}, err => {})Promise 的组织函数如上，须要通报一个函数作为参数，这个函数有两个变量： resolve， reject。而 Promise 有差别的实行状况，分三种状况：Resolve， Reject， Pending。依据以上的信息，写出最基本的 SimplePromise 的类构造：
class SimplePromise{
constructor(handler){
this._status = "PENDING"
handler(this._resolve.bind(this), this._reject.bind(this))//参数函数的作用域指向Class
}
_resolve(){}
_reject(){}
}接下来思索一下_resolve 与_reject两个函数的作用。我们晓得，Promise 依据 then 要领来实行回调，而 then 是依据状况推断要实行的回调函数。不难推导出，_resolve 与_reject恰是依据handler的实行来举行状况变动的，而状况只能由Pending向Reslove或Rejected转换，所以有：
class SimplePromise{
constructor(handler){
...
}
_resolve(val){//异步返回的数据
if(this._status === "PENDING"){//保证状况的不可逆性
this._status = "RESOLVED"
this._value = val
}
}
_reject(val){
if(this._status === "PENDING"){
this._status = "REJECTED"
this._value = val
}
}
}then的挪用逻辑
下面剖析 then 函数的逻辑，从挪用入手：
pro.then(data => {}, err => {})then 吸收两个参数，第一个是实行胜利挪用的函数，第二个是实行失利挪用的函数。
class SimplePromise{
constructor(handler){
...
}
_resolve(val){
...
}
_reject(val){
...
}
then(success, fail){
switch (this._status){
case "PENDING":
break;
case "RESOLVED":
success(this._value)
break;
case "REJECTED":
fail(this._value)
break;
}
}
}以上完成了最简朴的一个 Promise
测试代码：
const pro = new SimplePromise(function(res, rej) {
let random = Math.random() * 10
if(random > 5){
res("success")
}
else{
rej("fail")
}
})
pro.then(function(data) {
console.log(data)
}, function(err) {
console.log(err)
})
固然，这不能算是一个 Promise，如今仅仅完成了依据状况挪用差别的回调函数。还没有完成异步。
那怎样完成异步呢？关键在于 then 函数，当推断_status为PENDING时，怎样延后挪用 success与fail函数，守候状况转变后再挪用？
支撑异步
这里采纳数组来存储 fail 与 success 函数：
class SimplePromise{
constructor(handler){
this.status = "PENDING"
this._onSuccess = []//存储fail 与 success 函数
this._onFail = []
handler(this._resolve.bind(this), this._reject.bind(this))
}
_resolve(val){
if(this.status === "PENDING"){
...
let temp
while(this._onSuccess.length > 0){//顺次实行onSuccess中的回调函数
temp = this._onSuccess.shift()
temp(val)
}
}
}
_reject(val){
if(this.status === "PENDING"){
...
let temp
while(this._onFail.length > 0){
temp = this._onFail.shift()
temp(val)
}
}
}
then (success, fail){
switch (this.status){
case "PENDING":
this._onSuccess.push(success)
this._onFail.push(fail)
break;
...
}
}
}运用 onSuccess 和 onFail 来存储回调函数，当处置惩罚状况为 PENDING 时，将回调函数 push 到响应的数组里，当状况变动后，顺次实行数组里的回调函数。
测试代码：
const pro = new SimplePromise(function(res, rej) {
setTimeout(function(){
let random = Math.random() * 10
if(random > 5){
res("success")
}
else{
rej("fail")
}
}, 2000)
})
pro.then(function(data) {
console.log(data)
}, function(err) {
console.log(err)
})两秒后，会实行响应的回调。
到如今为止，最最最简朴的一个 Promise 骨架已基本完成了。然则另有很多功用待完成。如今能够轻微歇息一下，喝个咖啡打个鸡血，返来我们会继承让这个 Promise 骨架越发饱满起来。
. . . . . .
完美Promise
迎接返来，下面我们继承完美我们的 Promise。
上面完成了一个最基本的 Promise，但是还远远不够。起首，Promise 须要完成链式挪用，其次 Promise 还须要完成 all race resolve reject 等静态函数。
起首，怎样完成 then 的链式挪用呢？须要 then 返回的也是一个 Promise。
因而有
class SimplePromise{
...
then(success, fail){
return new SimplePromise((nextSuccess, nextFail) => {
const onFullfil = function(val){
const res = success(val)
nextSuccess(res)
}
const onReject = function(val){
const res = fail(val)
nextSuccess(res) ;
}
switch (this._status){
case "PENDING":
this._onSuccess.push(onFullfil)
this._onFail.push(onReject)
break;
case "RESOLVED":
onFullfil(this._value)
break;
case "REJECTED":
onReject(this._value)
break;
}
})
}
}测试代码：
const sp = new SimplePromise(function (res, rej){
setTimeout(function(){
let random = Math.random() * 10
random > 5 ? res(random) : rej(random)
}, 1000)
})
sp.then(data => {
console.log("more than 5 " + data)
return data
}, err =>{
console.log("less than 5 " + err)
return err
}).then((data) => {
console.log(data)
})then的参数限定
完成了链式挪用，then 要领另有很多其他限定：
下面思索 以下题目：代码中四个运用 promise 的语句之间的差别点在哪儿？
假定 doSomething 也 doSomethingElse 都返回 Promise
doSomething().then(function () {
return doSomethingElse();
}).then(finalHandler);
doSomething().then(function () {
doSomethingElse();
}).then(finalHandler);;
doSomething().then(doSomethingElse()).then(finalHandler);;
doSomething().then(doSomethingElse).then(finalHandler);;答案 一会儿再发表，我们先来梳理以下then 要领对传入差别范例参数的处置惩罚机制：
直接上代码：
class SimplePromise{
...
then(success, fail){
return new SimplePromise((nextSuccess, nextFail) => {
const onFullfil = function(val){
if(typeof success !== "function"){
nextSuccess(val)
}
else{
const res = success(val)//success 的返回值
if(res instanceof SimplePromise){//假如success 返回一个promise 对象
res.then(nextSuccess, nextFail)
}
else{
nextSuccess(res)
}
}
}
if(fail){
const onReject = function(val){
if(typeof fail !== "function"){
nextSuccess(val)
}
else{
const res = fail(val)
if(res instanceof SimplePromise){
res.then(nextSuccess, nextFail)
}
else{
nextSuccess(res)
}
}
}
}
else{
onReject = function(){}
}
switch (this._status){
case "PENDING":
this._onSuccess.push(onFullfil)
this._onFail.push(onReject)
break;
case "RESOLVED":
onFullfil(this._value)
break;
case "REJECTED":
onReject(this._value)
break;
}
})
}
}关于传入 then 要领的参数，起首推断其是不是为 function，推断为否，直接实行 下一个 then 的 success 函数；推断为是，接着推断函数的返回值 res 范例是不是为 Promise，假如为否，直接实行下一个 then 的 success 函数，假如为是，经由过程 then 挪用接下来的函数。
所以，上面的题目就不难得到答案了。
<!-- 1 -->
doSomething().then(function () {
return doSomethingElse();//返回值为Promise
}).then(finalHandler);
RETURN:
doSomething
--->doSomethingElse(undefined)
---> final(doSomethingElseResult)<!-- 2 -->
doSomething().then(function () {
doSomethingElse();//返回值为 undefined
}).then(finalHandler);
RETURN:
doSomething
--->doSomethingElse(undefined)
---> final(undefined)
<!-- 3 -->
doSomething().then(doSomethingElse())//参数 typeof != function
.then(finalHandler);
RETURN:
doSomething
doSomethingElse(undefined)
---> final(doSomethingResult)
<!-- 4 -->
doSomething().then(doSomethingElse)//与1的挪用体式格局是差别的
.then(finalHandler);
RETURN:
doSomething
--->doSomethingElse(doSomethingResult)
---> final(doSomethingElseResult)好，then 要领已完美好了。
静态函数
接下来是 Promise 的种种静态函数
class SimplePromise(){
...
static all(){}
static race(){}
static resolve(){}
static reject(){}
}all
static all(promiselist){
if(Array.isArray(promiselist)){
const len = promiselist.length;
const count = 0
const arr = []
return new SimplePromise((res, rej) => {
for(let i = 0; i<len; i++){
this.resolve(promiselist[i]).then(data => {
arr[i] = data
count ++
if(count === len){//每个Promise都实行终了后返回
res(arr)
}
}, err => {
rej(err)
})
}
})
}
}race
static race(promiselist){
if(Array.isArray(promiselist)){
const len = promiselist.length
return new SimplePromise((res, rej) =>{
promiselist.forEach(item =>{
this.resolve(item).then(data => {
res(data)
}, err =>{
rej(err)
})
})
})
}
}resolve
static resolve(obj){
if(obj instanceof SimplePromise){
return obj
}
else {
return new SimplePromise((res) =>{
res(obj)
})
}
}reject
static reject(obj){
if(obj instanceof SimplePromise){
return obj
}
else {
return new SimplePromise((res, rej) =>{
rej(obj)
})
}
}
总结
如今，一个完全的 Promise 对象就完成了。如今来总结一下 callback 回折衷 Promise 的异同吧。
实在，不管是 callback 照样 Promise，这两者都是将须要滞后实行要领而提早声明的体式格局，只不过 callback 的处置惩罚体式格局比较粗暴，将 cb 函数放到异步实行的末端；而 Promise 优于 cb 的是经由过程定义了差别的实行状况，越发仔细的举行效果处置惩罚，供应了很好的 catch 机制，这是其一；其二，then 的链式挪用处理了 cb 的回调地狱；然则 then 的链式挪用也不是很好的处理方案,假如封装不好，then内里套用大批的代码的话也会引起代码的不美观和阅读上的难题，这一方面的最终处理要领照样 es7 的 async/await。
跋文
这篇文章的代码是几个礼拜之前写的，参考的是思否上的一篇关于promise的文章；总结的是我对promise的明白和思索，假如有不正确或毛病的处所还愿望列位不吝赐教！愿望人人主动反应，一同交换！
参考文档
谈一谈运用 Promise 的反形式<https://blog.csdn.net/kingppy…
写这篇文章的时刻，我是参考我两周前的代码写的，当时的代码思绪泉源于思否上的谋篇博客，等我找到会贴上来
