> 作者：D827
>
> 來源：[恆生LIGHT雲社群](https://developer.hs.net/thread/1915)

沒有一個功能是看了原始碼後，還不會用的。所以看完本篇文章，希望能幫助你徹底掌握Promise。

# Promise的介紹

Promise物件是ES6提供的實現非同步的一個解決方案，它使得非同步方法可以像同步方法那樣返回值。

promise是一個**建構函式**，**包裹（封裝）**一個**非同步函式**(ajax;定時器；資料庫讀取；fs檔案讀取)，當然它也可以包裹一個非非同步函式。入參為兩個**函式**：**resolve、reject**。成功呼叫resolve，並傳遞引數，失敗呼叫reject，並傳遞引數。使用.then來作為**回撥結果的處理**，then接受兩個**函式引數**，第一個引數接受正確的返回結果，第二個函式接收錯誤的返回結果。

Promise三種狀態：pending、fullfilled/resolved、rejected

Promise初始狀態為pending，透過resolve方法將狀態修改為fullfilled/resolved;透過reject將狀態修改為rejected

promise的優點：它能夠實現鏈式呼叫，解決了回撥實現非同步導致的回撥地獄問題。

promise的缺點：

1. 無法監測進行狀態、新建立即執行且無法取消；
2. 如果不設定回撥函式，Promise 內部丟擲的錯誤，不會反應到外部；
3. 有時會造成多個 then 的鏈式呼叫，可能會造成程式碼的語義不夠明確。

# Promise的基本使用

```js
function sleep(data){
    return new Promise((resolve,reject)=>{
    // new Promise 包裹的可以是一個非同步的程式碼，也可以是一個同步的程式碼
    // 程式碼執行成功
        setTimeOut(()=>{
           	let result = null
            if(1){
              resolve(result)  
            }else{
               reject(result) 
            } 
        },1000)
})
}
sleep(1000).then(v=>{
    // 正確返回處理
},e=>{
   // 錯誤返回處理
}).then(v=>{
  
}).then(v=>{
  
})
……
.catch(e=>{
    // 錯誤處理
})
```

# 自定義Promise需要注意的問題，及解答

1. promise如何修改狀態

透過呼叫resolve、reject修改狀態

2. 多次呼叫resolve、reject可以修改狀態嗎

不可以，當從pending修改為resolved或者rejected後無法再次修改為其他狀態

3. promise是先修改狀態還是顯示執行then，以及什麼時候得到資料

兩種情況都可能出現，當promise包裹的內容為非同步時先指定then再修改狀態，反之先修改狀態再執行then；

資料是在執行完回撥後獲取。

4. promise.then返回一個promise，這個返回的型別結果由誰決定

返回的為promise，由返回的promise決定

返回為非promise，則返回為resolved

5. promise如何串聯多個操作任務

因為promise.then返回的是一個新的Promise物件，所以還可以呼叫then，實現鏈式呼叫

6. promise異常穿透

意思是不論有多少個then，中間任意一個then出現報錯都會被catch捕獲

7. 如何終止promise鏈

then中任意一個出現異常；

在任意then中將promise的狀態改為pending。

# Promise的自定義

```js
 //宣告建構函式
 function Promise(executor){
     //新增屬性
     this.PromiseState = 'pending';
     this.PromiseResult = null;
     //宣告屬性 回撥存在多個情況
     this.callbacks = [];
     //儲存例項物件的 this 的值
     const self = this;// self _this that
     //resolve 函式
     function resolve(data){
         //判斷狀態 多次呼叫resolve、reject不可以修改狀態
         if(self.PromiseState !== 'pending') return;
         //1. 修改物件的狀態 (promiseState)
         self.PromiseState = 'fulfilled';// resolved
         //2. 設定物件結果值 (promiseResult)
         self.PromiseResult = data;
         //呼叫成功的回撥函式
         setTimeout(() => {
             self.callbacks.forEach(item => {
                 item.onResolved(data);
             });
         });
     }
     //reject 函式
     function reject(data){
         //判斷狀態
         if(self.PromiseState !== 'pending') return;
         //1. 修改物件的狀態 (promiseState)
         self.PromiseState = 'rejected';// 
         //2. 設定物件結果值 (promiseResult)
         self.PromiseResult = data;
         //執行失敗的回撥
         setTimeout(() => {
             self.callbacks.forEach(item => {
                 item.onRejected(data);
             });
         });
     }
     try{
         //同步呼叫『執行器函式』
         executor(resolve, reject);
     }catch(e){
         //修改 promise 物件狀態為『失敗』
         reject(e);
     }
 }
 
 //新增 then 方法
 Promise.prototype.then = function(onResolved, onRejected){
     const self = this;
     //判斷回撥函式引數
     if(typeof onRejected !== 'function'){
         onRejected = reason => {
             throw reason;
         }
     }
     if(typeof onResolved !== 'function'){
         onResolved = value => value;
         //value => { return value};
     }
     return new Promise((resolve, reject) => {
         //封裝函式
         function callback(type){
             try{
                 //獲取回撥函式的執行結果
                 let result = type(self.PromiseResult);
                 //判斷
                 if(result instanceof Promise){
                     //如果是 Promise 型別的物件
                     result.then(v => {
                         resolve(v);
                     }, r=>{
                         reject(r);
                     })
                 }else{
                     //結果的物件狀態為『成功』
                     resolve(result);
                 }
             }catch(e){
                 reject(e);
             }
         }
         //呼叫回撥函式  PromiseState
         if(this.PromiseState === 'fulfilled'){
             setTimeout(() => {
                 callback(onResolved);
             });
         }
         if(this.PromiseState === 'rejected'){
             setTimeout(() => {
                 callback(onRejected);
             });
         }
         //判斷 pending 狀態
         if(this.PromiseState === 'pending'){
             // 非同步情況下儲存回撥函式 在非同步執行結束後執行回撥函式
             this.callbacks.push({
                 onResolved: function(){
                     callback(onResolved);
                 },
                 onRejected: function(){
                     callback(onRejected);
                 }
             });
         }
     })
 }
 
 //新增 catch 方法
 Promise.prototype.catch = function(onRejected){
     return this.then(undefined, onRejected);
 }
 
 //新增 resolve 方法
 Promise.resolve = function(value){
     //返回promise物件
     return new Promise((resolve, reject) => {
         if(value instanceof Promise){
             value.then(v=>{
                 resolve(v);
             }, r=>{
                 reject(r);
             })
         }else{
             //狀態設定為成功
             resolve(value);
         }
     });
 }
 
 //新增 reject 方法
 Promise.reject = function(reason){
     return new Promise((resolve, reject)=>{
         reject(reason);
     });
 }
 
 //新增 all 方法
 Promise.all = function(promises){
     //返回結果為promise物件
     return new Promise((resolve, reject) => {
         //宣告變數
         let count = 0;
         let arr = [];
         //遍歷
         for(let i=0;i<promises.length promises=""> {
                 //得知物件的狀態是成功
                 //每個promise物件 都成功
                 count++;
                 //將當前promise物件成功的結果 存入到陣列中
                 arr[i] = v;
                 //判斷
                 if(count === promises.length){
                     //修改狀態
                     resolve(arr);
                 }
             }, r => {
                 reject(r);
             });
         }
     });
 }
 
 //新增 race 方法
 Promise.race = function(promises){
     return new Promise((resolve, reject) => {
         for(let i=0;i<promises.length promises=""> {
                 //修改返回物件的狀態為 『成功』
                 resolve(v);
             },r=>{
                 //修改返回物件的狀態為 『失敗』
                 reject(r);
             })
         }
     });
 }
```

希望以上內容對你有所幫助！

***

想向技術大佬們多多取經？開發中遇到的問題何處探討？如何獲取金融科技海量資源？

[恆生LIGHT雲社群](https://developer.hs.net/)，由恆生電子搭建的金融科技專業社群平臺，分享實用技術乾貨、資源資料、金融科技行業趨勢，擁抱所有金融開發者。

掃描下方小程式二維碼，加入我們！

![](https://developer.hs.net/storage/attachments/2021/12/20/vzjJlveZdvxcz6rUjIBaPMbRK36iL8jCjtMU5h97.png)</promises.length></promises.length>

【前端】一文徹底學會Promise

相關文章