自制簡單的promise

tianlai 發(fā)布于2019-08-23 12:34 / 2160人閱讀

摘要：現(xiàn)在的已經(jīng)是用的很廣泛的，可以有效的解決地域回調(diào)的問題。那么現(xiàn)在我們可以制作一個(gè)簡單的讓自己更加熟悉。我們這樣就知道了的運(yùn)行機(jī)制了。

現(xiàn)在es6的promise已經(jīng)是用的很廣泛的，可以有效的解決地域回調(diào)的問題。
那么現(xiàn)在我們可以制作一個(gè)簡單的promise,讓自己更加熟悉promise。

一.回顧promise

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

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

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

以上就是一個(gè)promise的實(shí)例。從上述例子可以看出，promise可以處理異步操作。此外還可以鏈?zhǔn)秸{(diào)用

二.了解一下promise規(guī)范https://promisesaplus.com/

我們主要關(guān)心它的要求有一下幾點(diǎn)：

1.一個(gè)promise必須有3個(gè)狀態(tài)，pending，fulfilled(resolved)，rejected當(dāng)處于pending狀態(tài)的時(shí)候，可以轉(zhuǎn)移到fulfilled(resolved)或者rejected狀態(tài)。當(dāng)處于fulfilled(resolved)狀態(tài)或者rejected狀態(tài)的時(shí)候，就不可變。
2.一個(gè)promise必須有一個(gè)then方法，then方法接受兩個(gè)參數(shù)：
3.為了實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用，then方法必須返回一個(gè)promise

三.制作promise

接下來我們來制作簡單的promise,以下將分幾個(gè)版本，來循序漸進(jìn)的增加內(nèi)容

1) v1.0版本

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

同時(shí)在原型鏈上增加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ā)現(xiàn)這邊是沒有異步過程的，即then里面是沒有處理內(nèi)容的

v1.1

增加異步功能

function myPromise(constructor){
    let self=this;
    self.status="pending" //定義狀態(tài)改變前的初始狀態(tài)
    self.value=undefined;//定義狀態(tài)為resolved的時(shí)候的狀態(tài)
    self.reason=undefined;//定義狀態(tài)為rejected的時(shí)候的狀態(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í)行里面的異步方法
          })
       }
    }
    //捕獲構(gòu)造異常
    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:       
   }
}

現(xiàn)在在來測試已經(jīng)可以發(fā)出then了
但是現(xiàn)在還無法處理鏈?zhǔn)秸{(diào)用then

v1.3

增加then鏈?zhǔn)秸{(diào)用

v1.3.1

最簡單的就是then返回一個(gè)對象，可以進(jìn)行鏈?zhǔn)秸{(diào)用

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
}

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

v1.3.2

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里面的方法傳遞進(jìn)下一個(gè)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里面的方法傳遞到下一個(gè)Promise的狀態(tài)里
                    resolve(temple);
                } catch (e) {
                    reject(e);
                }
            })
            break;
        default:
    }
    return promise2;
}

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

覺得不錯(cuò)的請點(diǎn)贊，謝謝。