1. promise

1.1  含義

Promise 是非同步程式設計的一種解決方案，比傳統的解決方案——回撥函式和事件——更合理和更強大；

1.2  基本語法

new Promise(function(resolve, reject) {
  // ... some code 比如傳送ajax
  
  if (/* 非同步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
}).then(data => {})
.catch( err => {});

1.3 狀態

三個方法呼叫，對應三個狀態修改；pending--> notify(); fulfilled--> resolve() ; unfulfilled  ->reject()；三個方法返回的ren

1.4 方法介紹：

Promise:  構造方法，裡面傳遞一個函式，這個函式體內一般非同步操作，成功呼叫resolve 方法，反之呼叫reject 方

then： 指定resolved狀態和rejected狀態的回撥函式。引數說明，第一個是狀態為成功的回撥函式，第二個是失敗的回撥

如果當前Promise物件狀態為成功，那麼在 new promise((resolve, reject) =>{resolve()}).then(data=>{}) ;then的第一個回撥將被呼叫；

catch：在非同步操作丟擲異常時觸發，如果promise狀態為 unfulfilled  也將會被觸發；

all :非同步操作並行執行，當同時執行完畢後，才會執行

race： 當多個非同步操作一同執行，當有一個執行完畢，那麼方法將被執行

1.5  一般使用

const getJson = () =>{

    return new Promise((resolve, reject) => {

        setTimeout(()=>{
            
            let a = Math.random()*10;
            if(a<5){
                resolve(a);
            }else{
                reject(a);
            }              

        },1000);    
    });
}

let returnData = getJson().then(data => {
   
    console.log("我是成功回撥！"+data);
}).catch( err => {
    
    console.log("我是失敗回撥！"+err);
})
 

2. fetch 

2.1 介紹

fetch是用來取代傳統的XMLHttpRequest

2.2 基本語法

fetch('user/v1/getInfo',{
    method:'get',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
      'X-Requested-With': 'XMLHttpRequest',
    },
    body: new FormData(document.getElementById('comment-form'))
    //或者
    //body: JSON.stringify({
    //    email: '[email protected]'
    //    name: 'jim'
    //})
}).then(response =>{
    const type = 'json';
    //response 這個物件並不與 servlet中的一樣
    if(type==='json'){
        return response.text(); //返回一個text的resolve的promise物件
    }else{
        return response.json(); //返回一個json的resolve的promise物件
    }
}).then(data => {
    console.log("返回的資料！");
    //可以設定返回一個 promise物件 的狀態

}).catch(err => {
    console.log("請求異常！");

})

2.3 方法物件介紹

Response 代表響應, fetch 的 then 方法接收一個 Response 例項, 當然你也可以手動建立 Response 物件 —— 比如在 service workers 中可能會用到. Response 可以配置的引數包括:

• type - 型別,支援: basic, cors
• url - 響應的 URL
• useFinalURL - Boolean 值, 說明這是否是響應的最終 URL
• status - 狀態碼 (例如: 200, 404, 等等)
• ok - Boolean值,代表響應是否成功(status 值在 200-299 之間)
• statusText - 與狀態碼相對應的狀態值(例如: OK為200)
• headers - 與響應相關聯的 Headers 物件.
• redirected - 指示響應是否是重定向的結果。也就是說，它的 URL 列表有多條目錄。

Response 提供的方法如下:

• clone() - 建立一個 Response 物件的克隆.
• error() - 返回一個與網路錯誤相關的新 Response 物件.
• redirect() - 重定向,使用新的 URL 建立新的 response 物件..
• arrayBuffer() - 返回一個 resolve 是 ArrayBuffer 的 promise 物件。
• blob() - 返回一個 resolve 是 Blob 的 promise 物件。
• formData() - 返回一個 resolve 是 FormData  的 promise 物件。
• json() - 返回一個 resolve 是 JSON 的 promise 物件。
• text() - 返回一個 resolve 是文字的 promise 物件。

Request 物件表示一次 fetch 呼叫的請求資訊。傳入 Request 引數來呼叫 fetch, 可以執行很多自定義請求的高階用法:

• method - 支援 GET, POST, PUT, DELETE, HEAD
• url - 請求的 URL
• headers - 對應的 Headers 物件
• referrer - 請求的引用者（例如：client）
• mode - 是否允許跨域請求，以及哪些響應的屬性是可讀的。可選值：
• cors：（預設），允許跨域請求，將遵守 CORS 協議。
• no-cors：該模式允許來自 CDN 的指令碼、其他域的圖片和其他一些跨域資源。前提條件是請求的 method 只能是 HEAD、GET 或 POST。此外，如果 ServiceWorkers 攔截了這些請求，它不能隨意新增或者修改除這些之外 Header 屬性。第三，js 不能訪問 Response 物件中的任何屬性，這確保了跨域時 ServiceWorkers 的安全和隱私資訊洩露問題。
• same-origin：如果是一個跨域請求，將返回一個 error。
• navigate：支援導航的模式，僅用於 HTML 導航。
• credentials - 設定 cookies 是否隨請求一起傳送。可選值: 
• omit：（預設），不傳送 Cookie。
• same-origin：同域下自動傳送 Cookie。
• include：始終傳送 Cookie，即使是跨域。
• redirect - 定義重定向處理方式。可選值：follow(預設), error, manual。
• integrity - 子資源完整性值。
• cache - 設定快取模式。可選值： 
• default：瀏覽器在其 HTTP 快取中查詢匹配的請求。
•       a. 如果匹配並且是新鮮的，它將從快取中返回。
•       b. 如果存在匹配但已失效，則瀏覽器將向遠端伺服器發出有條件的請求。如果伺服器指出資源沒有改變，它將從快取中返回。否則資源將從伺服器下載並且快取將被更新。
•       c. 如果沒有匹配，瀏覽器將發出正常的請求，並且下載的資源更新快取。
• no-store：瀏覽器從遠端伺服器獲取資源，而不先檢視快取，並且不會使用下載的資源更新快取。
• reload：瀏覽器從遠端伺服器獲取資源，而不先檢視快取，但隨後將使用下載的資源更新快取。
• no-cache：瀏覽器在其 HTTP 快取中查詢匹配的請求。
•       a. 如果匹配，新鮮或陳舊，瀏覽器將向遠端伺服器發出有條件的請求。如果伺服器指出資源沒有改變，它將從快取中返回。否則資源將從伺服器下載並且快取將被更新。
•       b. 如果沒有匹配，瀏覽器將發出正常的請求，並用下載的資源更新快取。
• force-cache：瀏覽器在其 HTTP 快取中查詢匹配的請求。
•       a. 如果有匹配，新鮮或陳舊，它將從快取中返回。
•       b. 如果沒有匹配，瀏覽器將發出正常的請求，並用下載的資源更新快取。
• only-if-cached：瀏覽器在其 HTTP 快取中查詢匹配的請求。只能用在 mode 為 same-origin 的情況下
•       a. 如果匹配，新鮮或陳舊，將從快取中返回。
•       b. 如果沒有匹配，瀏覽器將返回一個錯誤。

3. promise 與 fetch 聯合使用

const ajax_ = (url,args,type='json') => {
    
    return new Promise((resolve, reject) => {
      fetch(url,args).then(function (response) {
      let data = '';
      if (type === 'json')
        data = response.json();
      else
        data = response.text();
      return data;
    }).then(data => {
      if (type === 'json' && data.code==404 ) {
        console && console.error('請求異常:'+data.msg);
        reject('請求異常:'+data.msg);
      
      }else {
        resolve(data);
      }
    }).catch(function (ex) {
      console && console.error('請求異常:'+ex);
      reject('請求異常:'+ex);
    });
  });
}

ajax_ ('user/v1/getInfoById',{method:'get',headers:{...},body:{username,password}});