這篇文章主要介紹“怎么弄懂Promise原理”，在日常操作中，相信很多人在怎么弄懂Promise原理問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么弄懂Promise原理”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

創(chuàng)新互聯(lián)建站主要從事網(wǎng)站建設、成都網(wǎng)站設計、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務靜寧,十載網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18982081108

Promise 必須為以下三種狀態(tài)之一：等待態(tài)（Pending）、執(zhí)行態(tài)（Fulfilled）和拒絕態(tài)（Rejected）。一旦Promise 被 resolve 或 reject，不能再遷移至其他任何狀態(tài)（即狀態(tài) immutable）。

基本過程：

1.  初始化 Promise 狀態(tài)（pending）

2.  執(zhí)行 then(..) 注冊回調(diào)處理數(shù)組（then 方法可被同一個 promise 調(diào)用多次）

3.  立即執(zhí)行 Promise 中傳入的 fn 函數(shù)，將Promise 內(nèi)部 resolve、reject 函數(shù)作為參數(shù)傳遞給 fn ，按事件機制時機處理

4.  Promise中要保證，then方法傳入的參數(shù) onFulfilled 和 onRejected，必須在then方法被調(diào)用的那一輪事件循環(huán)之后的新執(zhí)行棧中執(zhí)行。

真正的鏈式Promise是指在當前promise達到fulfilled狀態(tài)后，即開始進行下一個promise.

鏈式調(diào)用

先從 Promise 執(zhí)行結果看一下，有如下一段代碼：

new Promise((resolve, reject) => {        setTimeout(() => {            resolve({ test: 1 })            resolve({ test: 2 })            reject({ test: 2 })        }, 1000)    }).then((data) => {        console.log('result1', data)    },(data1)=>{        console.log('result2',data1)    }).then((data) => {        console.log('result3', data)    })    //result1 { test: 1 }    //result3 undefined

顯然這里輸出了不同的 data。由此可以看出幾點：

1.  可進行鏈式調(diào)用，且每次 then 返回了新的 Promise(2次打印結果不一致，如果是同一個實例，打印結果應該一致。

2.  只輸出第一次 resolve 的內(nèi)容，reject 的內(nèi)容沒有輸出，即 Promise 是有狀態(tài)且狀態(tài)只可以由pending -> fulfilled或 pending-> rejected,是不可逆的。

3.  then 中返回了新的 Promise,但是then中注冊的回調(diào)仍然是屬于上一個 Promise 的。

基于以上幾點，我們先寫個基于 PromiseA+ 規(guī)范的只含 resolve 方法的 Promise 模型: 

function Promise(fn){          let state = 'pending';         let value = null;         const callbacks = [];         this.then = function (onFulfilled){             return new Promise((resolve, reject)=>{                 handle({ //橋梁，將新 Promise 的 resolve 方法，放到前一個 promise 的回調(diào)對象中                     onFulfilled,                      resolve                 })             })         }         function handle(callback){             if(state === 'pending'){                 callbacks.push(callback)                 return;             }             if(state === 'fulfilled'){                 if(!callback.onFulfilled){                     callback.resolve(value)                     return;                 }                 const ret = callback.onFulfilled(value) //處理回調(diào)                 callback.resolve(ret) //處理下一個 promise 的resolve             }         }         function resolve(newValue){             const fn = ()=>{                 if(state !== 'pending')return                 state = 'fulfilled';                 value = newValue                 handelCb()             }             setTimeout(fn,0) //基于 PromiseA+ 規(guī)范         }         function handelCb(){             while(callbacks.length) {                 const fulfiledFn = callbacks.shift();                 handle(fulfiledFn);             };         }         fn(resolve)     }

這個模型簡單易懂，這里最關鍵的點就是在 then 中新創(chuàng)建的 Promise，它的狀態(tài)變?yōu)?fulfilled 的節(jié)點是在上一個 Promise的回調(diào)執(zhí)行完畢的時候。也就是說當一個 Promise 的狀態(tài)被 fulfilled 之后，會執(zhí)行其回調(diào)函數(shù)，而回調(diào)函數(shù)返回的結果會被當作 value，返回給下一個 Promise(也就是then 中產(chǎn)生的 Promise)，同時下一個 Promise的狀態(tài)也會被改變(執(zhí)行 resolve 或 reject)，然后再去執(zhí)行其回調(diào),以此類推下去…鏈式調(diào)用的效應就出來了。

但是如果僅僅是例子中的情況，我們可以這樣寫： 

new Promise((resolve, reject) => {          setTimeout(() => {              resolve({ test: 1 })          }, 1000)      }).then((data) => {          console.log('result1', data)         //dosomething          console.log('result3')      })      //result1 { test: 1 }      //result3

實際上，我們常用的鏈式調(diào)用，是用在異步回調(diào)中，以解決"回調(diào)地獄"的問題。如下例子：

new Promise((resolve, reject) => {    setTimeout(() => {      resolve({ test: 1 })    }, 1000)  }).then((data) => {    console.log('result1', data)    //dosomething    return test()  }).then((data) => {    console.log('result2', data)  })  function test(id) {    return new Promise(((resolve) => {      setTimeout(() => {        resolve({ test: 2 })      }, 5000)    }))  }  //基于第一個 Promise 模型，執(zhí)行后的輸出  //result1 { test: 1 }  //result2 Promise {then: ƒ}

用上面的 Promise 模型，得到的結果顯然不是我們想要的。認真看上面的模型，執(zhí)行 callback.resolve 時，傳入的參數(shù)是 callback.onFulfilled 執(zhí)行完成的返回，顯然這個測試例子返回的就是一個 Promise，而我們的 Promise 模型中的 resolve 方法并沒有特殊處理。那么我們將 resolve 改一下:

function Promise(fn){         ...        function resolve(newValue){            const fn = ()=>{                if(state !== 'pending')return                if(newValue && (typeof newValue === 'object' || typeof newValue === 'function')){                    const {then} = newValue                    if(typeof then === 'function'){                        // newValue 為新產(chǎn)生的 Promise,此時resolve為上個 promise 的resolve                        //相當于調(diào)用了新產(chǎn)生 Promise 的then方法，注入了上個 promise 的resolve 為其回調(diào)                        then.call(newValue,resolve)                        return                    }                }                state = 'fulfilled';                value = newValue                handelCb()            }            setTimeout(fn,0)        }        ...    }

用這個模型，再測試我們的例子，就得到了正確的結果： 

new Promise((resolve, reject) => {          setTimeout(() => {              resolve({ test: 1 })          }, 1000)      }).then((data) => {          console.log('result1', data)          //dosomething          return test()      }).then((data) => {          console.log('result2', data)      })      function test(id) {          return new Promise(((resolve, reject) => {              setTimeout(() => {              resolve({ test: 2 })              }, 5000)          }))      }      //result1 { test: 1 }      //result2 { test: 2 }

顯然，新增的邏輯就是針對 resolve 入?yún)?Promise 的時候的處理。我們觀察一下 test 里面創(chuàng)建的 Promise，它是沒有調(diào)用 then方法的。從上面的分析我們已經(jīng)知道 Promise 的回調(diào)函數(shù)就是通過調(diào)用其 then 方法注冊的，因此 test 里面創(chuàng)建的 Promise 其回調(diào)函數(shù)為空。

顯然如果沒有回調(diào)函數(shù)，執(zhí)行 resolve 的時候，是沒辦法鏈式下去的。因此，我們需要主動為其注入回調(diào)函數(shù)。

我們只要把第一個 then 中產(chǎn)生的 Promise 的 resolve 函數(shù)的執(zhí)行，延遲到 test 里面的 Promise 的狀態(tài)為 onFulfilled 的時候再執(zhí)行，那么鏈式就可以繼續(xù)了。所以，當 resolve 入?yún)?Promise 的時候，調(diào)用其 then 方法為其注入回調(diào)函數(shù)，而注入的是前一個 Promise 的 resolve 方法，所以要用 call 來綁定 this 的指向。

基于新的 Promise 模型，上面的執(zhí)行過程產(chǎn)生的 Promise 實例及其回調(diào)函數(shù)，可以用看下表：

有了這個表格，我們就可以清晰知道各個實例中 callback 執(zhí)行的順序是：

c1 -> p2resolve -> c2 -> p3resolve -> [] -> p5resolve -> []

以上就是鏈式調(diào)用的原理了。

reject

下面我們再來補全 reject 的邏輯。只需要在注冊回調(diào)、狀態(tài)改變時加上 reject 的邏輯即可。

完整代碼如下: 

function Promise(fn){           let state = 'pending';          let value = null;          const callbacks = [];          this.then = function (onFulfilled,onRejected){              return new Promise((resolve, reject)=>{                  handle({                      onFulfilled,                       onRejected,                      resolve,                       reject                  })              })          }          function handle(callback){              if(state === 'pending'){                  callbacks.push(callback)                  return;              }              const cb = state === 'fulfilled' ? callback.onFulfilled:callback.onRejected;              const next = state === 'fulfilled'? callback.resolve:callback.reject;              if(!cb){                  next(value)                  return;              }              const ret = cb(value)              next(ret)          }          function resolve(newValue){              const fn = ()=>{                  if(state !== 'pending')return                  if(newValue && (typeof newValue === 'object' || typeof newValue === 'function')){                      const {then} = newValue                      if(typeof then === 'function'){                          // newValue 為新產(chǎn)生的 Promise,此時resolve為上個 promise 的resolve                          //相當于調(diào)用了新產(chǎn)生 Promise 的then方法，注入了上個 promise 的resolve 為其回調(diào)                          then.call(newValue,resolve, reject)                          return                      }                  }                  state = 'fulfilled';                  value = newValue                  handelCb()              }              setTimeout(fn,0)          }          function reject(error){              const fn = ()=>{                  if(state !== 'pending')return                  if(error && (typeof error === 'object' || typeof error === 'function')){                      const {then} = error                      if(typeof then === 'function'){                          then.call(error,resolve, reject)                          return                      }                  }                  state = 'rejected';                  value = error                  handelCb()              }              setTimeout(fn,0)          }          function handelCb(){              while(callbacks.length) {                  const fn = callbacks.shift();                  handle(fn);              };          }          fn(resolve, reject)      }

異常處理

異常通常是指在執(zhí)行成功/失敗回調(diào)時代碼出錯產(chǎn)生的錯誤，對于這類異常，我們使用 try-catch 來捕獲錯誤，并將 Promise 設為 rejected 狀態(tài)即可。

handle代碼改造如下： 

function handle(callback){          if(state === 'pending'){              callbacks.push(callback)              return;          }          const cb = state === 'fulfilled' ? callback.onFulfilled:callback.onRejected;          const next = state === 'fulfilled'? callback.resolve:callback.reject;          if(!cb){              next(value)              return;          }          try {              const ret = cb(value)              next(ret)          } catch (e) {              callback.reject(e);          }        }

我們實際使用時，常習慣注冊 catch 方法來處理錯誤，例：

new Promise((resolve, reject) => {       setTimeout(() => {           resolve({ test: 1 })       }, 1000)   }).then((data) => {       console.log('result1', data)       //dosomething       return test()   }).catch((ex) => {       console.log('error', ex)   })

實際上，錯誤也好，異常也罷，最終都是通過reject實現(xiàn)的。也就是說可以通過 then 中的錯誤回調(diào)來處理。所以我們可以增加這樣的一個 catch 方法： 

function Promise(fn){          ...         this.then = function (onFulfilled,onRejected){             return new Promise((resolve, reject)=>{                 handle({                     onFulfilled,                      onRejected,                     resolve,                      reject                 })             })         }         this.catch = function (onError){             this.then(null,onError)         }         ...     }

Finally方法

在實際應用的時候，我們很容易會碰到這樣的場景，不管Promise最后的狀態(tài)如何，都要執(zhí)行一些最后的操作。我們把這些操作放到 finally 中，也就是說 finally 注冊的函數(shù)是與 Promise 的狀態(tài)無關的，不依賴 Promise 的執(zhí)行結果。所以我們可以這樣寫 finally 的邏輯： 

function Promise(fn){           ...          this.catch = function (onError){              this.then(null,onError)          }          this.finally = function (onDone){              this.then(onDone,onError)          }          ...     }

resolve 方法和 reject 方法

實際應用中，我們可以使用 Promise.resolve 和 Promise.reject 方法，用于將于將非 Promise 實例包裝為 Promise 實例。如下例子：

Promise.resolve({name:'winty'})  Promise.reject({name:'winty'})  // 等價于  new Promise(resolve => resolve({name:'winty'}))  new Promise((resolve,reject) => reject({name:'winty'}))

這些情況下，Promise.resolve 的入?yún)⒖赡苡幸韵聨追N情況：

•  無參數(shù) [直接返回一個resolved狀態(tài)的 Promise 對象]

•  普通數(shù)據(jù)對象 [直接返回一個resolved狀態(tài)的 Promise 對象]

•  一個Promise實例 [直接返回當前實例]

•  一個thenable對象(thenable對象指的是具有then方法的對象) [轉為 Promise 對象，并立即執(zhí)行thenable對象的then方法。]

基于以上幾點，我們可以實現(xiàn)一個 Promise.resolve 方法如下： 

function Promise(fn){           ...          this.resolve = function (value){              if (value && value instanceof Promise) {                  return value;              } else if (value && typeof value === 'object' && typeof value.then === 'function'){                  let then = value.then;                  return new Promise(resolve => {                      then(resolve);                  });              } else if (value) {                  return new Promise(resolve => resolve(value));              } else {                  return new Promise(resolve => resolve());              }          }          ...      }

Promise.reject與Promise.resolve類似，區(qū)別在于Promise.reject始終返回一個狀態(tài)的rejected的Promise實例，而Promise.resolve的參數(shù)如果是一個Promise實例的話，返回的是參數(shù)對應的Promise實例，所以狀態(tài)不一 定。

因此，reject 的實現(xiàn)就簡單多了，如下： 

function Promise(fn){           ...          this.reject = function (value){              return new Promise(function(resolve, reject) {                  reject(value);              });          }          ...      }

Promise.all

入?yún)⑹且粋€ Promise 的實例數(shù)組，然后注冊一個 then 方法，然后是數(shù)組中的 Promise 實例的狀態(tài)都轉為 fulfilled 之后則執(zhí)行 then 方法。這里主要就是一個計數(shù)邏輯，每當一個 Promise 的狀態(tài)變?yōu)?fulfilled 之后就保存該實例返回的數(shù)據(jù)，然后將計數(shù)減一，當計數(shù)器變?yōu)?0 時，代表數(shù)組中所有 Promise 實例都執(zhí)行完畢。

function Promise(fn){         ...        this.all = function (arr){            var args = Array.prototype.slice.call(arr);            return new Promise(function(resolve, reject) {                if(args.length === 0) return resolve([]);                var remaining = args.length;                function res(i, val) {                    try {                        if(val && (typeof val === 'object' || typeof val === 'function')) {                            var then = val.then;                            if(typeof then === 'function') {                                then.call(val, function(val) {                                    res(i, val);                                }, reject);                                return;                            }                        }                        args[i] = val;                        if(--remaining === 0) {                            resolve(args);                        }                    } catch(ex) {                        reject(ex);                    }                }                for(var i = 0; i < args.length; i++) {                    res(i, args[i]);                }            });        }        ...    }

Promise.race

有了 Promise.all 的理解，Promise.race 理解起來就更容易了。它的入?yún)⒁彩且粋€ Promise 實例數(shù)組，然后其 then 注冊的回調(diào)方法是數(shù)組中的某一個 Promise 的狀態(tài)變?yōu)?fulfilled 的時候就執(zhí)行。因為 Promise 的狀態(tài)只能改變一次，那么我們只需要把 Promise.race 中產(chǎn)生的 Promise 對象的 resolve 方法，注入到數(shù)組中的每一個 Promise 實例中的回調(diào)函數(shù)中即可。

function Promise(fn){       ...      this.race = function(values) {          return new Promise(function(resolve, reject) {              for(var i = 0, len = values.length; i < len; i++) {                  values[i].then(resolve, reject);              }          });      }      ...      }

到此，關于“怎么弄懂Promise原理”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
分享標題：怎么弄懂Promise原理
分享網(wǎng)址：http://weahome.cn/article/phdcpe.html