Promise不會？？看這裡！！！史上最通俗易懂的Promise！！！

weixin_33704234發表於2018-05-19
Promise


一、什麼是Promise？我們用Promise來解決什麼問題？

Promise 是非同步程式設計的一種解決方案： 從語法上講，promise是一個物件，從它可以獲取非同步操作的訊息；從本意上講，它是承諾，承諾它過一段時間會給你一個結果。 promise有三種狀態：pending(等待態)，fulfiled(成功態)，rejected(失敗態)；狀態一旦改變，就不會再變。創造promise例項後，它會立即執行。

我相信大家經常寫這樣的程式碼：

// 當引數a大於10且引數fn2是一個方法時 執行fn2
function fn1(a, fn2) {
    if (a > 10 && typeof fn2 == 'function') {
        fn2()
    }
}
fn1(11, function() {
    console.log('this is a callback')
})複製程式碼

一般來說我們會碰到的回撥巢狀都不會很多，一般就一到兩級，但是某些情況下，回撥巢狀很多時，程式碼就會非常繁瑣，會給我們的程式設計帶來很多的麻煩，這種情況俗稱——回撥地獄。

這時候我們的promise就應運而生、粉墨登場了

promise是用來解決兩個問題的：

  • 回撥地獄，程式碼難以維護， 常常第一個的函式的輸出是第二個函式的輸入這種現象
  • promise可以支援多個併發的請求，獲取併發請求中的資料
  • 這個promise可以解決非同步的問題，本身不能說promise是非同步的


二、es6 promise用法大全

Promise是一個建構函式，自己身上有all、reject、resolve這幾個眼熟的方法，原型上有then、catch等同樣很眼熟的方法。

那就new一個

let p = new Promise((resolve, reject) => {
    //做一些非同步操作
    setTimeout(() => {
        console.log('執行完成');
        resolve('我是成功！！');
    }, 2000);
});複製程式碼

Promise的建構函式接收一個引數：函式，並且這個函式需要傳入兩個引數：
  • resolve ：非同步操作執行成功後的回撥函式
  • reject：非同步操作執行失敗後的回撥函式

then 鏈式操作的用法  

所以，從表面上看，Promise只是能夠簡化層層回撥的寫法，而實質上，Promise的精髓是“狀態”，用維護狀態、傳遞狀態的方式來使得回撥函式能夠及時呼叫，它比傳遞callback函式要簡單、靈活的多。所以使用Promise的正確場景是這樣的：

p.then((data) => {
    console.log(data);
})
.then((data) => {
    console.log(data);
})
.then((data) => {
    console.log(data);
});複製程式碼


reject的用法 :

把Promise的狀態置為rejected，這樣我們在then中就能捕捉到，然後執行“失敗”情況的回撥。看下面的程式碼。

    let p = new Promise((resolve, reject) => {
        //做一些非同步操作
      setTimeout(function(){
            var num = Math.ceil(Math.random()*10); //生成1-10的隨機數
            if(num<=5){
                resolve(num);
            }
            else{
                reject('數字太大了');
            }
      }, 2000);
    });
    p.then((data) => {
            console.log('resolved',data);
        },(err) => {
            console.log('rejected',err);
        }
    ); 
複製程式碼
then中傳了兩個引數，then方法可以接受兩個引數，第一個對應resolve的回撥，第二個對應reject的回撥。所以我們能夠分別拿到他們傳過來的資料。多次執行這段程式碼，你會隨機得到下面兩種結果：
或者

catch的用法

我們知道Promise物件除了then方法，還有一個catch方法，它是做什麼用的呢？其實它和then的第二個引數一樣，用來指定reject的回撥。用法是這樣：

p.then((data) => {
    console.log('resolved',data);
}).catch((err) => {
    console.log('rejected',err);
});複製程式碼

效果和寫在then的第二個引數裡面一樣。不過它還有另外一個作用：在執行resolve的回撥（也就是上面then中的第一個引數）時，如果丟擲異常了（程式碼出錯了），那麼並不會報錯卡死js，而是會進到這個catch方法中。請看下面的程式碼：

p.then((data) => {
    console.log('resolved',data);
    console.log(somedata); //此處的somedata未定義
})
.catch((err) => {
    console.log('rejected',err);
});複製程式碼

在resolve的回撥中，我們console.log(somedata);而somedata這個變數是沒有被定義的。如果我們不用Promise，程式碼執行到這裡就直接在控制檯報錯了，不往下執行了。但是在這裡，會得到這樣的結果：


也就是說進到catch方法裡面去了，而且把錯誤原因傳到了reason引數中。即便是有錯誤的程式碼也不會報錯了，這與我們的try/catch語句有相同的功能

all的用法：誰跑的慢，以誰為準執行回撥。all接收一個陣列引數，裡面的值最終都算返回Promise物件

Promise的all方法提供了並行執行非同步操作的能力，並且在所有非同步操作執行完後才執行回撥。看下面的例子：
let Promise1 = new Promise(function(resolve, reject){})
let Promise2 = new Promise(function(resolve, reject){})
let Promise3 = new Promise(function(resolve, reject){})

let p = Promise.all([Promise1, Promise2, Promise3])

p.then(funciton(){
  // 三個都成功則成功  
}, function(){
  // 只要有失敗，則失敗 
})
複製程式碼

有了all，你就可以並行執行多個非同步操作，並且在一個回撥中處理所有的返回資料，是不是很酷？有一個場景是很適合用這個的，一些遊戲類的素材比較多的應用，開啟網頁時，預先載入需要用到的各種資源如圖片、flash以及各種靜態檔案。所有的都載入完後，我們再進行頁面的初始化。

race的用法：誰跑的快，以誰為準執行回撥

race的使用場景：比如我們可以用race給某個非同步請求設定超時時間，並且在超時後執行相應的操作，程式碼如下：
 //請求某個圖片資源
    function requestImg(){
        var p = new Promise((resolve, reject) => {
            var img = new Image();
            img.onload = function(){
                resolve(img);
            }
            img.src = '圖片的路徑';
        });
        return p;
    }
    //延時函式，用於給請求計時
    function timeout(){
        var p = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('圖片請求超時');
            }, 5000);
        });
        return p;
    }
    Promise.race([requestImg(), timeout()]).then((data) =>{
        console.log(data);
    }).catch((err) => {
        console.log(err);
    });
複製程式碼
requestImg函式會非同步請求一張圖片，我把地址寫為"圖片的路徑"，所以肯定是無法成功請求到的。timeout函式是一個延時5秒的非同步操作。我們把這兩個返回Promise物件的函式放進race，於是他倆就會賽跑，如果5秒之內圖片請求成功了，那麼遍進入then方法，執行正常的流程。如果5秒鐘圖片還未成功返回，那麼timeout就跑贏了，則進入catch，報出“圖片請求超時”的資訊。執行結果如下：


好了，我相信大家對用法已經懂了，那麼我們來手寫一款自己的promise吧

三、根據promiseA+實現一個自己的promise

步驟一：實現成功和失敗的回撥方法

要實現上面程式碼中的功能，也是promise最基本的功能。首先，需要建立一個建構函式promise，建立一個promisel類，在使用的時候傳入了一個執行器executor，executor會傳入兩個引數：成功(resolve)和失敗(reject)。之前說過，只要成功，就不會失敗，只要失敗就不會成功。所以，預設狀態下，在呼叫成功時，就返回成功態，呼叫失敗時，返回失敗態。程式碼如下：

class Promise {
    constructor (executor){
        //預設狀態是等待狀態
        this.status = 'panding';
        this.value = undefined;
        this.reason = undefined;
        //存放成功的回撥
        this.onResolvedCallbacks = [];
        //存放失敗的回撥
        this.onRejectedCallbacks = [];
        let resolve = (data) => {//this指的是例項
            if(this.status === 'pending'){
                this.value = data;
                this.status = "resolved";
                this.onResolvedCallbacks.forEach(fn => fn());
            }
 
        }
        let reject = (reason) => {
            if(this.status === 'pending'){
                this.reason = reason;
                this.status = 'rejected';
                this.onRejectedCallbacks.forEach(fn => fn());
            }
        }
        try{//執行時可能會發生異常
            executor(resolve,reject);
        }catch (e){
            reject(e);//promise失敗了
        }
       
    }複製程式碼

promise A+規範規定，在有異常錯誤時，則執行失敗函式。

constructor (executor){
    ......      try{
        executor(resolve,reject);
      }catch(e){
        reject(e);
      }
  }
複製程式碼

步驟二：then方法鏈式呼叫

then方法是promise的最基本的方法，返回的是兩個回撥，一個成功的回撥，一個失敗的回撥，實現過程如下：

    then(onFulFilled, onRejected) {
    if (this.status === 'resolved') { //成功狀態的回撥
      onFulFilled(this.value);
    }
    if (this.status === 'rejected') {//失敗狀態的回撥
      onRejected(this.reason);
    }
  }複製程式碼

let p = new Promise(function(){
    resolve('我是成功');
})
p.then((data) => {console.log(data);},(err) => {});
p.then((data) => {console.log(data);},(err) => {});
p.then((data) => {console.log(data);},(err) => {});
複製程式碼

返回的結果是：

我是成功
我是成功
我是成功
複製程式碼

為了實現這樣的效果，則上一次的程式碼將要重新寫過，我們可以把每次呼叫resolve的結果存入一個陣列中，每次呼叫reject的結果存入一個陣列。這就是為何會在上面定義兩個陣列,且分別在resolve()和reject()遍歷兩個陣列的原因。因此，在呼叫resolve()或者reject()之前，我們在pending狀態時，會把多次then中的結果存入陣列中，則上面的程式碼會改變為：

  then(onFulFilled, onRejected) {
    if (this.status === 'resolved') {
      onFulFilled(this.value);
    }
    if (this.status === 'rejected') {
      onRejected(this.reason);
    }
    // 當前既沒有完成 也沒有失敗
    if (this.status === 'pending') {
      // 存放成功的回撥
      this.onResolvedCallbacks.push(() => {
        onFulFilled(this.value);
      });
      // 存放失敗的回撥
      this.onRejectedCallbacks.push(() => {
        onRejected(this.reason);
      });
    }
  }複製程式碼

Promise A+規範中規定then方法可以鏈式呼叫

在promise中，要實現鏈式呼叫返回的結果是返回一個新的promise，第一次then中返回的結果，無論是成功或失敗，都將返回到下一次then中的成功態中，但在第一次then中如果丟擲異常錯誤，則將返回到下一次then中的失敗態中

鏈式呼叫成功時

鏈式呼叫成功會返回值，有多種情況，根據舉的例子，大致列出可能會發生的結果。因此將鏈式呼叫返回的值單獨寫一個方法。方法中傳入四個引數，分別是p2,x,resolve,reject,p2指的是上一次返回的promise，x表示執行promise返回的結果，resolve和reject是p2的方法。則程式碼寫為：

function resolvePromise(p2,x,resolve,reject){
    ....
}
複製程式碼

  • 返回結果不能是自己

var p = new Promise((resovle,reject) => {
    return p;     //返回的結果不能是自己，
})
複製程式碼

當返回結果是自己時，永遠也不會成功或失敗，因此當返回自己時，應丟擲一個錯誤

function resolvePromise(p2,x,resolve,reject){
    if(px===x){
        return reject(new TypeError('自己引用自己了'));
    }
    ....
}
複製程式碼

  • 返回結果可能是promise

function resolvePromise(promise2,x,resolve,reject){
    //判斷x是不是promise
    //規範中規定：我們允許別人亂寫，這個程式碼可以實現我們的promise和別人的promise 進行互動
    if(promise2 === x){//不能自己等待自己完成
        return reject(new TypeError('迴圈引用'));
    };
    // x是除了null以外的物件或者函式
    if(x !=null && (typeof x === 'object' || typeof x === 'function')){
        let called;//防止成功後呼叫失敗
        try{//防止取then是出現異常  object.defineProperty
            let then = x.then;//取x的then方法 {then:{}}
            if(typeof then === 'function'){//如果then是函式就認為他是promise
                //call第一個引數是this，後面的是成功的回撥和失敗的回撥
                then.call(x,y => {//如果Y是promise就繼續遞迴promise
                    if(called) return;
                    called = true;
                    resolvePromise(promise2,y,resolve,reject)
                },r => { //只要失敗了就失敗了
                    if(called) return;
                    called = true;
                    reject(r);  
                });
            }else{//then是一個普通物件，就直接成功即可
                resolve(x);
            }
        }catch (e){
            if(called) return;
            called = true;
            reject(e)
        }
    }else{//x = 123 x就是一個普通值 作為下個then成功的引數
        resolve(x)
    }

}複製程式碼

  • 返回結果可能為一個普通值，則直接   resolve(x);
  • Promise一次只能呼叫成功或者失敗

也就是當呼叫成功就不能再呼叫失敗了，如果兩個都呼叫的時候，哪個先呼叫就執行哪一個。程式碼部分還是上面那部分

個人認為，這個地方比較繞，需要慢慢的一步一步的理清楚。

根據promise A+規範原理，promise在自己的框架中，封裝了一系列的內建的方法。

  • 捕獲錯誤的方法 catch()
  • 解析全部方法 all()
  • 競賽 race()
  • 生成一個成功的promise  resolve()
  • 生成一個失敗的promise  reject()

最後給大家附上全部原始碼，供大家仔細品讀。

function resolvePromise(promise2,x,resolve,reject){
    //判斷x是不是promise
    //規範中規定：我們允許別人亂寫，這個程式碼可以實現我們的promise和別人的promise 進行互動
    if(promise2 === x){//不能自己等待自己完成
        return reject(new TypeError('迴圈引用'));
    };
    // x是除了null以外的物件或者函式
    if(x !=null && (typeof x === 'object' || typeof x === 'function')){
        let called;//防止成功後呼叫失敗
        try{//防止取then是出現異常  object.defineProperty
            let then = x.then;//取x的then方法 {then:{}}
            if(typeof then === 'function'){//如果then是函式就認為他是promise
                //call第一個引數是this，後面的是成功的回撥和失敗的回撥
                then.call(x,y => {//如果Y是promise就繼續遞迴promise
                    if(called) return;
                    called = true;
                    resolvePromise(promise2,y,resolve,reject)
                },r => { //只要失敗了就失敗了
                    if(called) return;
                    called = true;
                    reject(r);  
                });
            }else{//then是一個普通物件，就直接成功即可
                resolve(x);
            }
        }catch (e){
            if(called) return;
            called = true;
            reject(e)
        }
    }else{//x = 123 x就是一個普通值 作為下個then成功的引數
        resolve(x)
    }

}

class Promise {
    constructor (executor){
        //預設狀態是等待狀態
        this.status = 'panding';
        this.value = undefined;
        this.reason = undefined;
        //存放成功的回撥
        this.onResolvedCallbacks = [];
        //存放失敗的回撥
        this.onRejectedCallbacks = [];
        let resolve = (data) => {//this指的是例項
            if(this.status === 'pending'){
                this.value = data;
                this.status = "resolved";
                this.onResolvedCallbacks.forEach(fn => fn());
            }
 
        }
        let reject = (reason) => {
            if(this.status === 'pending'){
                this.reason = reason;
                this.status = 'rejected';
                this.onRejectedCallbacks.forEach(fn => fn());
            }
        }
        try{//執行時可能會發生異常
            executor(resolve,reject);
        }catch (e){
            reject(e);//promise失敗了
        }
       
    }
    then(onFuiFilled,onRejected){ 
        //防止值得穿透 
        onFuiFilled = typeof onFuiFilled === 'function' ? onFuiFilled : y => y;
        onRejected = typeof onRejected === 'function' ? onRejected :err => {throw err;}        
        let promise2;//作為下一次then方法的promise
       if(this.status === 'resolved'){
           promise2 = new Promise((resolve,reject) => {
               setTimeout(() => {
                  try{
                        //成功的邏輯 失敗的邏輯
                        let x = onFuiFilled(this.value);
                        //看x是不是promise 如果是promise取他的結果 作為promise2成功的的結果
                        //如果返回一個普通值，作為promise2成功的結果
                        //resolvePromise可以解析x和promise2之間的關係
                        //在resolvePromise中傳入四個引數，第一個是返回的promise，第二個是返回的結果，第三個和第四個分別是resolve()和reject()的方法。
                        resolvePromise(promise2,x,resolve,reject)
                  }catch(e){
                        reject(e);
                  } 
               },0)
           }); 
       } 
       if(this.status === 'rejected'){
            promise2 = new Promise((resolve,reject) => {
                setTimeout(() => {
                    try{
                        let x = onRejected(this.reason);
                        //在resolvePromise中傳入四個引數，第一個是返回的promise，第二個是返回的結果，第三個和第四個分別是resolve()和reject()的方法。
                        resolvePromise(promise2,x,resolve,reject)
                    }catch(e){
                        reject(e);
                    }
                },0)

            });
       }
       //當前既沒有完成也沒有失敗
       if(this.status === 'pending'){
           promise2 = new Promise((resolve,reject) => {
               //把成功的函式一個個存放到成功回撥函式陣列中
                this.onResolvedCallbacks.push( () =>{
                    setTimeout(() => {
                        try{
                            let x = onFuiFilled(this.value);
                            resolvePromise(promise2,x,resolve,reject);
                        }catch(e){
                            reject(e);
                        }
                    },0)
                });
                //把失敗的函式一個個存放到失敗回撥函式陣列中
                this.onRejectedCallbacks.push( ()=>{
                    setTimeout(() => {
                        try{
                            let x = onRejected(this.reason);
                            resolvePromise(promise2,x,resolve,reject)
                        }catch(e){
                            reject(e)
                        }
                    },0)
                })
           })
       }
       return promise2;//呼叫then後返回一個新的promise
    }
    catch (onRejected) {
        // catch 方法就是then方法沒有成功的簡寫
        return this.then(null, onRejected);
    }
}
Promise.all = function (promises) {
    //promises是一個promise的陣列
    return new Promise(function (resolve, reject) {
        let arr = []; //arr是最終返回值的結果
        let i = 0; // 表示成功了多少次
        function processData(index, data) {
            arr[index] = data;
            if (++i === promises.length) {
                resolve(arr);
            }
        }
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(function (data) {
                processData(i, data)
            }, reject)
        }
    })
}
// 只要有一個promise成功了 就算成功。如果第一個失敗了就失敗了
Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        for (var i = 0; i < promises.length; i++) {
            promises[i].then(resolve,reject)
        }
    })
}
// 生成一個成功的promise
Promise.resolve = function(value){
    return new Promise((resolve,reject) => resolve(value);
}
// 生成一個失敗的promise
Promise.reject = function(reason){
    return new Promise((resolve,reject) => reject(reason));
}
Promise.defer = Promise.deferred = function () {
    let dfd = {};
    dfd.promise = new Promise( (resolve, reject) =>  {
        dfd.resolve = resolve;
        dfd.reject = reject;
    });
    return dfd
}
module.exports = Promise;
複製程式碼

關於這篇promise A+規範的總結，肯定會存在很多不足的地方，歡迎各位提出寶貴的意見或建議，也希望能幫助到你從中獲得一些知識！


相關文章