摘要：現在的已經是用的很廣泛的，可以有效的解決地域回調的問題。那么現在我們可以制作一個簡單的讓自己更加熟悉。我們這樣就知道了的運行機制了。

現在es6的promise已經是用的很廣泛的，可以有效的解決地域回調的問題。
那么現在我們可以制作一個簡單的promise,讓自己更加熟悉promise。

先我們需要了解一下promise的用法。以下demo

var p=new Promise(function(resolve,reject){
    setTimeout(function(){
       resolve("success")
    },1000);
    console.log("創(chuàng)建一個新的promise");
})
p.then(function(x){
  console.log(x)
})

//輸出：
創(chuàng)建一個新的promise
success

以上就是一個promise的實例。從上述例子可以看出，promise可以處理異步操作。此外還可以鏈式調用

我們主要關心它的要求有一下幾點：

1.一個promise必須有3個狀態(tài)，pending，fulfilled(resolved)，rejected當處于pending狀態(tài)的時候，可以轉移到fulfilled(resolved)或者rejected狀態(tài)。當處于fulfilled(resolved)狀態(tài)或者rejected狀態(tài)的時候，就不可變。
2.一個promise必須有一個then方法，then方法接受兩個參數：
3.為了實現鏈式調用，then方法必須返回一個promise

接下來我們來制作簡單的promise,以下將分幾個版本，來循序漸進的增加內容

function myPromise(constructor){
    let self=this;
    self.status="pending" //定義狀態(tài)改變前的初始狀態(tài)
    self.value=undefined;//定義狀態(tài)為resolved的時候的狀態(tài)
    self.reason=undefined;//定義狀態(tài)為rejected的時候的狀態(tài)
    function resolve(value){
        //兩個==="pending"，保證了狀態(tài)的改變是不可逆的
       if(self.status==="pending"){
          self.value=value;
          self.status="resolved";
       }
    }
    function reject(reason){
        //兩個==="pending"，保證了狀態(tài)的改變是不可逆的
       if(self.status==="pending"){
          self.reason=reason;
          self.status="rejected";
       }
    }
    //捕獲構造異常
    try{
       constructor(resolve,reject);
    }catch(e){
       reject(e);
    }
}

同時在原型鏈上增加then方法

myPromise.prototype.then=function(onFullfilled,onRejected){
   let self=this;
   switch(self.status){
      case "resolved":
        onFullfilled(self.value);
        break;
      case "rejected":
        onRejected(self.reason);
        break;
      default:       
   }
}

然后測試一下

var p=new myPromise(function(resolve,reject){resolve(1)});
p.then(function(x){console.log(x)})
//輸出1

但是我們可以發(fā)現這邊是沒有異步過程的，即then里面是沒有處理內容的

增加異步功能

function myPromise(constructor){
    let self=this;
    self.status="pending" //定義狀態(tài)改變前的初始狀態(tài)
    self.value=undefined;//定義狀態(tài)為resolved的時候的狀態(tài)
    self.reason=undefined;//定義狀態(tài)為rejected的時候的狀態(tài)
    self.onFullfilledArray=[];
    self.onRejectedArray=[];
    function resolve(value){
       if(self.status==="pending"){
          self.value=value;
          self.status="resolved";
          self.onFullfilledArray.forEach(function(f){
                f(self.value);
                //如果狀態(tài)從pending變?yōu)閞esolved，
                //那么就遍歷執(zhí)行里面的異步方法
          });
        
       }
    }
    function reject(reason){
       if(self.status==="pending"){
          self.reason=reason;
          self.status="rejected";
          self.onRejectedArray.forEach(function(f){
              f(self.reason);
             //如果狀態(tài)從pending變?yōu)閞ejected， 
             //那么就遍歷執(zhí)行里面的異步方法
          })
       }
    }
    //捕獲構造異常
    try{
       constructor(resolve,reject);
    }catch(e){
       reject(e);
    }
}

myPromise.prototype.then=function(onFullfilled,onRejected){
   let self=this;
   switch(self.status){
      case "pending":
        self.onFullfilledArray.push(function(){
             onFullfilled(self.value)
        });
        self.onRejectedArray.push(function(){
             onRejected(self.reason)
        });
        break;
      case "resolved":
        onFullfilled(self.value);
        break;
      case "rejected":
        onRejected(self.reason);
        break;
      default:       
   }
}

現在在來測試已經可以發(fā)出then了
但是現在還無法處理鏈式調用then

增加then鏈式調用

最簡單的就是then返回一個對象，可以進行鏈式調用

myPromise.prototype.then=function(onFullfilled,onRejected){
   let self=this;
   switch(self.status){
      case "pending":
        self.onFullfilledArray.push(function(){
             onFullfilled(self.value)
        });
        self.onRejectedArray.push(function(){
             onRejected(self.reason)
        });
        break;
      case "resolved":
        onFullfilled(self.value);
        break;
      case "rejected":
        onRejected(self.reason);
        break;
      default:       
   }
   return this
}

一個簡單的this就是promise對象本身，這樣就可以了，按時this永遠都是同一個promise對象，即then里的value永遠都是相同的
因此我們需要返回一個新的promise

promise.prototype.then = function(onFullfilled, onRejected) {

    var self = this
    let promise2

    switch (self.status) {
        case "pending":
            promise2 = new promise(function(resolve, reject) {
                self.onFullfilledArray.push(function() {
                    try {
                        let temple = onFullfilled(self.value)
                        resolve(temple)
                    } catch (e) {
                        reject(e)
                    }
                })
                self.onRejectedArray.push(function() {
                    try {
                        let temple = onRejected(self.reason);
                        resolve(temple)
                    } catch (e) {
                        reject(e) // error catch
                    }
                })
            })
            break;
        case "resolved":
            promise2 = new promise(function(resolve, reject) {
                try {
                    let temple = onFullfilled(self.value);
                    //將上次一then里面的方法傳遞進下一個Promise的狀態(tài)
                    resolve(temple);
                } catch (e) {
                    reject(e); //error catch
                }
            })
            break;
        case "rejected":
            promise2 = new promise(function(resolve, reject) {
                try {
                    let temple = onRejected(self.reason);
                    //將then里面的方法傳遞到下一個Promise的狀態(tài)里
                    resolve(temple);
                } catch (e) {
                    reject(e);
                }
            })
            break;
        default:
    }
    return promise2;
}

至此簡單的promise已經完成了。但是這個promise還是有不少問題的，如then里面直接使用primise等。這些都是優(yōu)化問題。
我們這樣就知道了promise的運行機制了。

覺得不錯的請點贊，謝謝。