談?wù)勎覍romise的理解(一)

一、Promise是什么?

Promise是最早由社區(qū)提出和實現(xiàn)的一種解決異步編程的方案,比其他傳統(tǒng)的解決方案(回調(diào)函數(shù)和事件)更合理和更強大。

ES6 將其寫進了語言標準,統(tǒng)一了用法,原生提供了Promise對象。
ES6 規(guī)定,Promise對象是一個構(gòu)造函數(shù),用來生成Promise實例。

二、Promise是為解決什么問題而產(chǎn)生的?

promise是為解決異步處理回調(diào)金字塔問題而產(chǎn)生的

三、Promise的兩個特點

1、Promise對象的狀態(tài)不受外界影響

1)pending 初始狀態(tài)

2)fulfilled 成功狀態(tài)

3)rejected 失敗狀態(tài)

Promise 有以上三種狀態(tài),只有異步操作的結(jié)果可以決定當前是哪一種狀態(tài),其他任何操作都無法改變這個狀態(tài)

2、Promise的狀態(tài)一旦改變,就不會再變,任何時候都可以得到這個結(jié)果,狀態(tài)不可以逆,只能由 pending變成fulfilled或者由pending變成rejected

四、Promise的三個缺點

1)無法取消Promise,一旦新建它就會立即執(zhí)行,無法中途取消
2)如果不設(shè)置回調(diào)函數(shù),Promise內(nèi)部拋出的錯誤,不會反映到外部
3)當處于pending狀態(tài)時,無法得知目前進展到哪一個階段,是剛剛開始還是即將完成

五、Promise在哪存放成功回調(diào)序列和失敗回調(diào)序列?

1)onResolvedCallbacks 成功后要執(zhí)行的回調(diào)序列 是一個數(shù)組

2)onRejectedCallbacks 失敗后要執(zhí)行的回調(diào)序列 是一個數(shù)組

以上兩個數(shù)組存放在Promise 創(chuàng)建實例時給Promise這個類傳的函數(shù)中,默認都是空數(shù)組。
每次實例then的時候 傳入 onFulfilled 成功回調(diào) onRejected 失敗回調(diào),如果此時的狀態(tài)是pending 則將onFulfilled和onRejected push到對應的成功回調(diào)序列數(shù)組和失敗回調(diào)序列數(shù)組中,如果此時的狀態(tài)是fulfilled 則onFulfilled立即執(zhí)行,如果此時的狀態(tài)是rejected則onRejected立即執(zhí)行

上述序列中的回調(diào)函數(shù)執(zhí)行的時候 是有順序的,即按照順序依次執(zhí)行

六、Promise的用法

1、Promise構(gòu)造函數(shù)接受一個函數(shù)作為參數(shù),該函數(shù)的兩個參數(shù)分別是resolve和reject。它們是兩個函數(shù),由 JavaScript 引擎提供,不用自己部署。

    const promise = new Promise(function(resolve, reject) {
      // ... some code

      if (/* 異步操作成功 */){
        resolve(value);
      } else {
        reject(error);
      }
    });

2、resolve函數(shù)的作用是,將Promise對象的狀態(tài)從“未完成”變?yōu)椤俺晒Α保磸?pending 變?yōu)?resolved),在異步操作成功時調(diào)用,并將異步操作的結(jié)果,作為參數(shù)傳遞出去;reject函數(shù)的作用是,將Promise對象的狀態(tài)從“未完成”變?yōu)椤笆 保磸?pending 變?yōu)?rejected),在異步操作失敗時調(diào)用,并將異步操作報出的錯誤,作為參數(shù)傳遞出去。

3、Promise實例生成以后,可以用then方法分別指定resolved狀態(tài)和rejected狀態(tài)的回調(diào)函數(shù)。

    promise.then(function(value) {
      // success
    }, function(error) {
      // failure
    });

then方法可以接受兩個回調(diào)函數(shù)作為參數(shù)。第一個回調(diào)函數(shù)是Promise對象的狀態(tài)變?yōu)閞esolved時調(diào)用,第二個回調(diào)函數(shù)是Promise對象的狀態(tài)變?yōu)閞ejected時調(diào)用。其中,第二個函數(shù)是可選的,不一定要提供。這兩個函數(shù)都接受Promise對象傳出的值作為參數(shù)。

七、按照Promise A+規(guī)范寫Promise的簡單實現(xiàn)原理

// 第一步:Promise構(gòu)造函數(shù)接受一個函數(shù)作為參數(shù),該函數(shù)的兩個參數(shù)分別是resolve和reject。它們是兩個函數(shù),由 JavaScript 引擎提供,不用自己部署。
    function Promise(task) {

        let that = this; // 緩存this
        that.status = 'pending'; // 進行中的狀態(tài)
        that.value = undefined; //初始值

        that.onResolvedCallbacks = []; // 存放成功后要執(zhí)行的回調(diào)函數(shù)的序列
        that.RejectedCallbacks = []; // 存放失敗后要執(zhí)行的回調(diào)函數(shù)的序列
        // 該方法是將Promise由pending變成fulfilled
        function resolve (value) {
            if (that.status == 'pending') {
                that.status = 'fulfilled';
                that.value = value;
                that.onResolvedCallbacks.forEach(cb => cd(that.value))
            }

        }
        // 該方法是將Promise由pending變成rejected
        function reject (reason) {
          if (that.status == 'pending') {
                that.status = 'rejected';
                that.value = reason;
                that.onRjectedCallbacks.forEach(cb => cd(that.value))
            }
        }

        try {
        // 每一個Promise在new一個實例的時候 接受的函數(shù)都是立即執(zhí)行的
            task(resolve, reject)
        } catch (e) {
            reject(e)
        }
    }

// 第二部 寫then方法,接收兩個函數(shù)onFulfilled onRejected,狀態(tài)是成功態(tài)的時候調(diào)用onFulfilled 傳入成功后的值,失敗態(tài)的時候執(zhí)行onRejected,傳入失敗的原因,pending 狀態(tài)時將成功和失敗后的這兩個方法緩存到對應的數(shù)組中,當成功或失敗后 依次再執(zhí)行調(diào)用
    Promise.prototype.then = function(onFulfilled, onRejected) {
        let that = this;
        if (that.status == 'fulfilled') {
            onFulfilled(that.value);
        }
        if (that.status == 'rejected') {
            onRejected(that.value);
        }
        if (that.status == 'pending') {
            that.onResolvedCallbacks.push(onFulfilled);
            that.onRjectedCallbacks.push(onRejected);
        }
    }

八、Promise 鏈式寫法

我們先來看一個例子,根據(jù)例子得出結(jié)論,然后再寫源碼的實現(xiàn)部分來驗證結(jié)論

    let promise = new Promise(function (resolve, reject) {
        resolve(100);// reject(100)
    });

    promise.then(function (data) {
        return data+100;

    },function (err) {
       return 'ssss';

    }).then(function (data) {
        console.log(data);// 200  // undefined // sss
    })

從上面的例子可以看出:

當?shù)谝粋€promise的成功的回調(diào)里返回 200時,第二個promise的成功回調(diào)的參數(shù)就是200
當將resolve(100)改成reject(100)的時候,因為失敗回調(diào)中什么也沒有返回所以第二個promise的成功回調(diào)中的參數(shù)是undefined
當失敗的回調(diào)中返回sss時,第二個promise的成功回調(diào)中的參數(shù)是sss

由此我們可以看出,第一個promise不管成功回調(diào)還是失敗回調(diào),他的返回值作為第二個promise中的成功時回調(diào)函數(shù)的參數(shù)值

鏈式寫法能一直then下去的原因:鏈式調(diào)用靠的是返回新的promise,來保證可以一直走成功或失敗

九、 Promise.catch

Promise.prototype.catch方法是.then(null, rejection)的別名,用于指定發(fā)生錯誤時的回調(diào)函數(shù)。

    //catch原理就是只傳失敗的回調(diào)
    Promise.prototype.catch = function(onRejected){
        this.then(null,onRejected);
    }

十、 Promise.all 方法

參數(shù):接受一個數(shù)組,數(shù)組內(nèi)都是Promise實例
返回值:返回一個Promise實例,這個Promise實例的狀態(tài)轉(zhuǎn)移取決于參數(shù)的Promise實例的狀態(tài)變化。當參數(shù)中所有的實例都處于resolve狀態(tài)時,返回的Promise實例會變?yōu)閞esolve狀態(tài)。如果參數(shù)中任意一個實例處于reject狀態(tài),返回的Promise實例變?yōu)閞eject狀態(tài)

    Promise.all = function(promises){
     return new Promise(function(resolve,reject){
       let done = gen(promises.length,resolve);
       for(let i=0;i<promises.length;i++){
         promises[i].then(function(data){
           done(i,data);
         },reject);
       }
     });
    }

十一、Promise.resolve

返回一個Promise實例,這個實例處于resolve狀態(tài)。
根據(jù)傳入的參數(shù)不同有不同的功能:

值(對象、數(shù)組、字符串等):作為resolve傳遞出去的值
Promise實例:原封不動返回

    //返回一個立刻成功的promise
    //別人提供 給你一個方法,需要你傳入一個promise,但你只有一個普通的值,你就可以通過這個方法把這個普通的值(string number object)轉(zhuǎn)成一個promise對象
    Promise.resolve = function(value){
      return new Promise(function(resolve){
        resolve(value);
      });
    }

十二、 Promise.reject

返回一個Promise實例,這個實例處于reject狀態(tài)。

參數(shù)一般就是拋出的錯誤信息。

    //返回一個立刻失敗的promise
    Promise.reject = function(reason){
      return new Promise(function(resolve,reject){
        reject(reason);
      });
    }

十三、 Promise.race

參數(shù):接受一個數(shù)組,數(shù)組內(nèi)都是Promise實例
返回值:返回一個Promise實例,這個Promise實例的狀態(tài)轉(zhuǎn)移取決于參數(shù)的Promise實例的狀態(tài)變化。當參數(shù)中任何一個實例處于resolve狀態(tài)時,返回的Promise實例會變?yōu)閞esolve狀態(tài)。如果參數(shù)中任意一個實例處于reject狀態(tài),返回的Promise實例變?yōu)閞eject狀態(tài)。

    Promise.race = function(promises){
      return new Promise(function(resolve,reject){
        for(let i=0;i<promises.length;i++){
          promises[i].then(resolve,reject);
        }
      });
    }

Promises/A+規(guī)范
完整的手寫promise源碼地址

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、Promise是什么? Promise是最早由社區(qū)提出和實現(xiàn)的一種解決異步編程的方案,比其他傳統(tǒng)的解決方案(回...
    Macchiato_go閱讀 1,488評論 0 0
  • Promise 對象 Promise 的含義 Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函...
    neromous閱讀 8,823評論 1 56
  • 本文適用的讀者 本文寫給有一定Promise使用經(jīng)驗的人,如果你還沒有使用過Promise,這篇文章可能不適合你,...
    HZ充電大喵閱讀 7,446評論 6 19
  • 前言 本文旨在簡單講解一下javascript中的Promise對象的概念,特性與簡單的使用方法。并在文末會附上一...
    _暮雨清秋_閱讀 2,312評論 0 3
  • 本文作者就是我,簡書的microkof。如果您覺得本文對您的工作有意義,產(chǎn)生了不可估量的價值,那么請您不吝打賞我,...
    microkof閱讀 16,067評論 9 40

友情鏈接更多精彩內(nèi)容