fetch 資源請求

簡介：fetch() 方法用於發起獲取資源的請求。它返回一個 promise，這個 promise 會在請求響應后被 resolve，並傳回 Response 對象。

為了更好的體驗，可點擊這里閱讀

XMLHttpRequest的痛

我們使用ajax久矣，最熟悉的莫過於經過jQuery封裝的ajax對象，因為簡單好用。
經過封裝打扮的ajax固然漂亮，可是我們都明白底層是怎么回事。對於主流瀏覽器是 XMLHttpRequest，對於低版本IE是 ActiveXObject
所以，對於傳統ajax使用，我們首先得統一 請求對象：

function ajaxFunction()
 {
 var xmlHttp;
 
 try
    {
   // Firefox, Opera 8.0+, Safari
    return xmlHttp=new XMLHttpRequest();
    }
 catch (e)
    {

  // Internet Explorer
   try
      {
      return xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
   catch (e)
      {

      try
         {
         return xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
      catch (e)
         {
         alert("您的瀏覽器不支持AJAX！");
         return false;
         }
      }
    }
 }

然后使用依然隱隱作痛：

var xhr = ajaxFunction();
var url = "http://xxxx.xxx/api/xxxx"
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

誠如是，XMLHttpRequest 的設計確實有點粗糙難用，配置和調用方式非常混亂，而且異步回調，沒有Promise對象的模式。

fetch簡介

官方解釋：

• fetch() 方法用於發起獲取資源的請求。它返回一個 promise，這個 promise 會在請求響應后被 resolve，並傳回 Response 對象。

• Window 和 WorkerGlobalScope 都實現了 GlobalFetch — 這意味着基本在任何場景下只要你想獲取資源，都可以使用 fetch() 方法。

• 當遇到網絡錯誤時，fetch() 返回的 promise 會被 reject，並傳回 TypeError，雖然這也可能因為權限或其它問題導致。成功的 fetch() 檢查不僅要包括 promise 被 resolve，還要包括 Response.ok 屬性為 true。HTTP 404 狀態並不被認為是網絡錯誤。

語法：

fetch(input, init).then(function(response) { ... });

參數

• input
  定義要獲取的資源。這可能是：
  • 一個 USVString 字符串，包含要獲取資源的 URL。
  • 一個 Request 對象。
• init 可選
  一個配置項對象，包括所有對請求的設置。可選的參數有：
  • method: 請求使用的方法，如 GET、POST。
  • headers: 請求的頭信息，形式為 Headers 對象或 ByteString。
  • body: 請求的 body 信息：可能是一個 Blob、BufferSource、FormData、URLSearchParams * 或者 USVString 對象。注意 GET 或 HEAD 方法的請求不能包含 body 信息。
  • mode: 請求的模式，如 cors、 no-cors 或者 same-origin。
  • credentials: 請求的 credentials，如 omit、same-origin 或者 include。
  • cache: 請求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.
• 返回值
  一個 Promise，resolve 時回傳 Response 對象。

兼容性：

 

fetch基本使用

var url = "xxxxxx";
fetch(url).then(function(response) {
    console.log(response)
    if (response.status !== 200) {
        console.log("request " + url + "error! status: " + response.status);
        return;
    }
    return response.json();
}).then(function(data) {
    console.log(data);
}).catch(function(e) {
    console.log("error");
});

如果你有做測試的話，可以看到 console.log(response) 打印出的信息，包含請求狀態，請求頭，請求體等等。
另外調用 response.json()方法返回依然是一個 Promise對象，所以，可以如下使用:

response.json().then(function (data){
      // do something
})

另外還有 第一個參數是 Request對象的使用方法，這里不做闡述。

參考資料

fetch mdn