ES6中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. 企業級應用