JavaScript-Promise對象

寫在前面:

在學習微信小程序過程當中瞭解到利用Promise，能夠對事件請求的回調進行優化，避免了多重回調形成的"回調地獄"問題，本文主要用做介紹及記錄在使用Promise過程當中遇到的問題和思考。

什麼是Promise？

Promise 是一個對象，至關於一個容器，裏面存的是一個異步操做的結果，而且表明一個將來可能會完成的操做。

Promise的三種狀態：

• pending：表明操做進行
• resolved：表明操做成功
• rejected：表明操做失敗

Promise的兩種狀態改變的方式：

• 當異步操做成功時，從pending轉變爲resolved，

• 當異步操做失敗時，從pending轉變爲rejected。

PS.一旦狀態改變，就會一直保持這個狀態，不會再發生變化。當狀態發生變化，promise.then綁定的函數就會被調用。

Promise一旦新建就會「當即執行」(它屬於microtask)，沒法取消。這也是它的缺點之一。

Promise的好處：

• 在「回調地獄」問題中，最顯而易見的困擾就是閱讀困難，下一個操做須要上一個操做的結果致使異步操做的多重嵌套，引用廖雪峯的一句總結：

• 多個異步任務是爲了容錯去訪問用同一資源時, 可使用Promise.race([promise實例...])
• 多個異步任務並行執行時,好比ajax訪問兩個接口, 能夠用Promise.all([promise實例...])

使用Promise的約定：

• 在本輪事件循環完成以前，回調函數是不會被調用。
• 經過then()添加的回調函數必定會被調用，即便它是在異步操做完成以後才被添加的函數
• 能夠屢次調用多個then()函數，它們會按照插入順序一個個獨立執行

Promise的做用：

• 處理異步任務
• 保存異步結果狀態
• 異步代碼同步化

Promise的使用：

套路通常爲：

1. 定義一個函數， 函數內部使用new Promise()的方式來返回一個promise對象，resolve用來保存異步處理成功的結果，reject用來保存異常處理的結果。

2. 而後函數調用，傳參。

3. 用then方法處理鏈式調用， then中的回調用來處理異步結果。

4. 用catch方法處理錯誤狀況,，也能夠用then(null, function() {})代替catch。

5. then的回調中也可return一個值，會被包裝成一個新的promise對象， 以此能夠繼續調用then方法。

6. 處理同步任務

   new Promise((resolve,reject)=>{
           resolve(1)；
       })
   .then(res=>{
       console.log(res)；
   });
   複製代碼

   輸出結果：

   1
   Ps.當狀態發生變化後執行then方法，並將resolve或reject的結果做爲then方法接受回調函數的參數
   複製代碼

7. 處理異步任務

   new Promise((resolve,reject)=>{
           setTimeout(()=>{
               resolve("成功");
           },1000);
       })
   .then(res=>{
       console.log(res);
   });
   複製代碼

   輸出結果：

   成功
   Ps.當異步代碼執行成功時，會調用resolve(...), 當異步代碼失敗時就會調用reject(...)
   複製代碼

8. 處理鏈式調用

   new Promise((resolve, reject) => {
       console.log('初始化');
       resolve();
   })
   .then(() => {
       throw new Error('有哪裏不對了');
       console.log('執行「這個」」');
   })
   .catch(() => {
       console.log('執行「那個」');
   })
   .then(() => {
       console.log('執行「這個」，不管前面發生了什麼');
   });
   複製代碼

   輸出結果：

   初始化
   執行「那個」
   執行「這個」，不管前面發生了什麼
   Ps.由於拋出了錯誤‘有哪裏不對了’，因此前一個‘執行「這個」’沒有被輸出
   複製代碼

參考:

[1].MDN web docs-developer.mozilla.org/zh-CN/docs/…

[2].AustinNorman：Promise的學習總結-www.ctolib.com/topics-1388…

[3].cz160：利用ES6進行Promise封裝總結-segmentfault.com/a/119000001…

[4].磚用西瓜：Promise到底解決了什麼問題-segmentfault.com/a/119000001…