ES6中Promise 承諾物件封裝非同步操作解析

純純王發表於2019-02-16
Promise物件封裝非同步

Promise

是非同步程式設計的一種解決方案，比傳統的解決方案（回撥函式和事件）更合理和更強大。它由社群最早
出和實現，ES6 將其寫進了語言標準，統一了用法，原生提供了Promise物件。

所謂Promise，簡單說就是一個容器，裡面儲存著某個未來才會結束的事件（通常是一個非同步操作）的結果。從語法上說，Promise 是一個物件，從它可以獲取非同步操作的訊息。Promise 提供統一的 API，各種非同步操作都可以用同樣的方法進行處理。
有了Promise物件，就可以將非同步操作以同步操作的流程表達出來，避免了層層巢狀的回撥函式。此外，Promise物件提供統一的介面，使得控制非同步操作更加容易。

非同步的解決方案：

  • 1）傳統ajax

        是一種非同步的JavaScript的請求，能夠在不影響當前程式的情況下和後臺進行互動.
           1.發起請求
               請求的返回時間難以確定，影響因素比較多，比如網路延遲
           2.監聽（成功，失敗）
               通過判斷狀態碼來決定執行那個回撥函式
               200 ok
               404 not found
               500 後臺程式碼異常
               403 無權訪問
               304 文件內容沒有發生改變
           3.呼叫回撥函式
               完成請求後的處理



         $.getJSON(`http://120.78.164.247:8080/grade`,function(data){
           alert(data)
           });
           alert(`end`);
           //先執行end 在彈出data

出現的問題：在回撥函式中巢狀如果比較多，就很容易出問題

  • 2）promise

       承諾
   存在三種狀態：
       1.未知狀態，
       2.成功狀態，resolve() 未知狀態---》成功狀態
       3.失敗狀態,reject()    未知狀態---》失敗狀態
   ajax中使用最多
   
   
   let promise = new Promise((resolve,reject)=>{
   $.ajaxSetup({
       error:function(){reject()};    //失敗
      });
       $.get(``,function(data){
       resolve(data);    //成功
      });
   promise.then(()={}).catch(()=>{});

在我的理解中promise是對ajax的一種封裝,上述程式碼中，使用的是用JQuery封裝的ajax程式碼分成了兩部分。

對非同步操作Ajax的封裝

  • 1.先來看看我們自己封裝一個Ajax
    let fetch = (method,url,successHandler,errorHandler)=>{
        let xhr = new XMLHttpRequest();
        xhr.open(method,url);
        xhr.responseType = `json`;
        xhr.setRequestHeader(`Accept`,`application/json`);//設定頭部資訊
        
        xhr.onreadystatechange = function(){
            if(this.readyState == 4){
                if(this.status == 200){
                    successHandler(this.response)
                }else{
                    errorHandler(this.response);
                };
            }
        };
        xhr.send();
    
    }

需要注意的是因為原生程式碼中需要http協議，所以這個程式碼在node中是無法使用的，

  • 2.下面來看看使用promise來封裝

    簡單的思路：

       let promise = new Promise((resolve,reject)=>{
   
       setTimeout(function(){//模擬非同步請求
           if (Math.round(Math.random()*10)>5) {
                       resolve(`success`);//成功
                   }else{
                       reject(`erro`);//失敗
                   }
   
       },3000);
   
   });
   
   promise.then((data)=>{
       console.log(data);
   }).catch((erro)=>{
       console.log(erro);
   });

    我們來看看promise如何封裝Ajax

       let fetch = (method,url)=>{
       return new Promise((resolve,reject)=>{
           let xhr = new XMLHttpRequest();//宣告一個請求
           xhr.open(method,url);
           xhr.responseType = `json`;
           xhr.setRequestHeader(`Accept`,`application/json`);
           xhr.onreadystatechange = function(){
               if(this.readyState == 4){//判斷狀態
               if(this.status == 200){
                   resolve(this.response)
               }else{
                   reject(this.response);
               };
           };
           };
               xhr.send();//傳送請求
       });
   };
   fetch(`get`,`http://120.78.164.247:8080/grade/findAll`).then(({code,msg,extend})=>{
       console.log(code);
       console.log(msg);
       console.log(extend);
   }).catch(()=>{});//呼叫自己封裝的fetch

Promise常用方法

接著，我們來看看Promise中的一些基本用法

  • 1.Promise.prototype.then()

     .then(function(){//success},functions(){//error});

then方法是定義在原型物件Promise.prototype上的，也就是說，Promise 例項具有then方法。它的作用是為 Promise 例項新增狀態改變時的回撥函式。then方法的第一個引數是Resolved狀態的回撥函式，第二個引數（可選）是Rejected狀態的回撥函式。then方法返回的是一個新的Promise例項（注意，不是原來那個Promise例項）。因此可以採用鏈式寫法，即then方法後面再呼叫另一個then方法。如果使用兩個then方法，第一個回撥函式完成以後，會將返回結果作為引數，傳入第二個回撥函式。

getJSON("/post/1.json").then( 
    post => getJSON(post.commentURL)
 ).then( 
    comments => console.log("Resolved: ", comments), 
    err => console.log("Rejected: ", err) 
);

上面程式碼中，第一個then方法指定的回撥函式，返回的是另一個Promise物件。這時，第二個then方法指定的回撥函式，就會等待這個新的Promise物件狀態發生變化。如果變為resolved，就呼叫funcA，如果狀態變為rejected，就呼叫funcB。

  • 2.Promise.prototype.catch()

Promise.prototype.catch方法是.then(null, rejection)的別名，用於指定發生錯誤時的回撥函式，一般來說，不要在then方法裡面定義Reject狀態的回撥函式（即then的第二個引數），總是使用catch方法。

var promise = new Promise(function(resolve, reject) { 
    reject(new Error(`test`)); 
});
 promise.catch(function(error) { 
    console.log(error);
 });

Promise 物件的錯誤具有“冒泡”性質，會一直向後傳遞，直到被捕獲為止。也就是說，錯誤總是會被下一個catch語句捕獲。

  • 3.Promise.all()

Promise.all方法用於將多個 Promise 例項，包裝成一個新的 Promise 例項。

var p = Promise.all([p1, p2, p3]);

上面程式碼中，Promise.all方法接受一個陣列作為引數，p1、p2、p3都是 Promise 例項，p的狀態由p1、p2、p3決定，分成兩種情況。
只有p1、p2、p3的狀態都變成fulfilled，p的狀態才會變成fulfilled，此時p1、p2、p3的返回值組成一個陣列，傳遞給p的回撥函式。
只要p1、p2、p3之中有一個被rejected，p的狀態就變成rejected，此時第一個被reject的例項的返回值，會傳遞給p的回撥函式。

  • 4.Promise.race()

Promise.race方法同樣是將多個Promise例項，包裝成一個新的Promise例項。下面程式碼中，只要p1、p2、p3之中有一個例項率先改變狀態，p的狀態就跟著改變。那個率先改變的 Promise 例項的返回值，就傳遞給p的回撥函式。

var p = Promise.race([p1, p2, p3]);

上面程式碼中，Promise.all方法接受一個陣列作為引數，p1、p2、p3都是 Promise 例項，p的狀態由p1、p2、p3決定，分成兩種情況。
只有p1、p2、p3的狀態都變成fulfilled，p的狀態才會變成fulfilled，此時p1、p2、p3的返回值組成一個陣列，傳遞給p的回撥函式。
只要p1、p2、p3之中有一個被rejected，p的狀態就變成rejected，此時第一個被reject的例項的返回值，會傳遞給p的回撥函式。

  • 5.Promise.resolve()

方法將現有物件轉為Promise物件，例如：

var jsPromise = Promise.resolve($.ajax(`/whatever.json`));

根據引數的不同，方法的返回值也會發生變化：

1.引數是一個Promise例項
Promise.resolve將不做任何修改、原封不動地返回這個例項。
2.引數是一個thenable物件
thenable物件指的是具有then方法的物件，Promise.resolve方法會將這個物件轉為Promise物件，然後就立即執行thenable物件的then方法。
3.引數不是具有then方法的物件，或根本就不是物件
如果引數是一個原始值，或者是一個不具有then方法的物件，則Promise.resolve方法返回一個新的Promise物件，狀態為Resolved。
4.不帶有任何引數
直接返回一個Resolved狀態的Promise物件。需要注意的是，立即resolve的Promise物件，是在本輪“事件迴圈”（event loop）的結束時，而不是在下一輪“事件迴圈”的開始時。
  • 6.Promise. reject()

Promise.reject(reason)方法也會返回一個新的 Promise 例項，該例項的狀態為rejected 。

var p = Promise.reject(`出錯了`); 
// 等同於 
var p = new Promise((resolve, reject) => reject(`出錯了`)) ;
  • 7.finally()

finally方法用於指定不管Promise物件最後狀態如何，都會執行的操作。它接受一個普通的回撥函式作為引數，該函式不管怎樣都必須執行。
下面是一個例子，伺服器使用Promise處理請求，然後使用finally方法關掉伺服器

server.listen(0) .then(function () {
     // run test
 }) .finally(server.stop);    //關掉伺服器

使用總結

Promise物件的使用大致分為如下幾個步驟：

 1. 構建承諾物件
    let promise = new Promise((resolve,reject)=>{
      // resolve()    未知->成功
      // reject()     未知->失敗
    });
 2. 執行
    promise.then(()=>{
      //成功後的回撥
    }).catch(()=>{
      //失敗後的回撥
    });

 3. 企業級應用

相關文章