緊跟時尚，Fetch實踐那些事

今天看到關於阿里前端面試的提問，看到有一個兄弟說，阿里應該都用fecth了，怎麼還在考ajax的底層實現，雖然之前讀ajax已死，fetch永生文章時有了解這個知識，但閒着也是閒着，仍是探索一下，才知道他好在那。
老規矩，看官方正式一點的文章，我仍是推薦MDN的，讀完我的理解,對比ajax，fetch的優點就是：

語義化強，調用如ajax第三方庫同樣簡潔；
支持promise；

來看一個簡單的調用：

fetch('http://localhost:8089/StockAnalyse/BlogServlet', fetchInitOption({flag:"getList"}))
.then(function(response){
    if(response.ok){  //避免404與500這樣的響應
            return response.json();
    } else {
        console.error('服務器繁忙，請稍後再試；\r\nCode:' + response.status)
    }
}).then(function(data){
           that.item =data;//在promise中this指向已經變爲指向window對象，因此提早用that保存了this；
           that = null;
        })                
});

若是你用過ajax第三方庫，如jquery,vue-resource,axios這些，你會發現，fetch調用方法和這些庫類似性很是之大，再看option的那些可設置屬性：

method: GET/POST...
headers: 和其餘header設置同樣，主要設置Content-type和自定義header；
body: 要傳遞的數據
mode: cors / no-cors / same-origin，默認爲 no-cors
credentials: omit / same-origin / include
cache: default / no-store / reload / no-cache / force-cache / only-if-cached
redirect: follow / error / manual
referrer: no-referrer / client / 
referrerPolicy: no-referrer / no-referrer-when-downgrade / origin /  origin-when-cross-origin / unsafe-url
integrity:

用fetch遇到的新鮮事:

1. 無論是404,仍是500這些錯誤，請求仍然有response響應，因此纔有response.ok狀態值的判斷;

2. 當咱們使用第三方ajax庫發送post請求，數據數據爲js對象且設置Content-type爲application/x-www-form-urlencoded，服務器都能正常響應(數據讀取爲request.getPrameter)；但Fetch這樣設置就會致使服務器500錯誤，緣由就在於Fetch它如AJAX同樣，是一個底層的API，沒有封裝相似的數據轉換,第三方庫都自帶,關於post請求經常使用的Content-type，因此爲了避免修改服務器端，我在配置post默認請求頭時，對發送數據乃作了必定處理，不過僅適用於簡單JS對象，目的就是將對象轉化爲鍵值對的方式，代碼以下：

   function fetchInitOption(json){

   let res=new Array();
   for(let item in json){
       res.push(item+'='+json[item])
   }
   return {
       method:'post',
       mode:'cors',
       headers: {
           'Content-Type': 'application/x-www-form-urlencoded'
       },
       body:res.join('&')            
   };

   }

3. this指向變化（這個不算fetch的坑，這是編程應注意的問題），由於我用了vue,實例中的this默認指向當前vue實例，可是當調用fetch這個方法在promise的響應的匿名函數裏，this指向了window對象，因此這裏須要提早用一個變量that來保持實例this的引用；

4. 請求前的攔截，就是在請求前想在header中加入自定義請求頭,如TOKEN，不過好像解決思路同樣,也能夠在InitOption時手動設置；

雖路無盡頭，但步伐堅決（早上一杯雞湯，美好的週末即將開始）