摘要：現(xiàn)在有很多優(yōu)雅的包裝，但是這遠(yuǎn)遠(yuǎn)不夠。一個(gè)實(shí)例代表了一個(gè)的請(qǐng)求部分。一旦創(chuàng)建，它所有的屬性都是只讀的。處理基本的返回不是所有的接口都返回格式的數(shù)據(jù)，所以還要處理一些類型的返回結(jié)果。最后很好用，但是現(xiàn)在還不允許取消一個(gè)請(qǐng)求。

一個(gè)隱藏最深的秘密就是AJAX的實(shí)現(xiàn)底層的XMLHttpRequest，這個(gè)方法本來(lái)并不是造出來(lái)干這事的。現(xiàn)在有很多優(yōu)雅的API包裝XHR，但是這遠(yuǎn)遠(yuǎn)不夠。于是有了fetch API。我們來(lái)看看這個(gè)API的基本用法。最新的瀏覽器都已經(jīng)支持這個(gè)方法了。

XHR對(duì)于我來(lái)說(shuō)太過(guò)復(fù)雜，用起來(lái)大概是這樣的：

// 開(kāi)始XHR這些
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
  request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
  try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
  } 
  catch (e) {
    try {
      request = new ActiveXObject("Microsoft.XMLHTTP");
    } 
    catch (e) {}
  }
}

// 發(fā)送請(qǐng)求.
request.open("GET", "https://davidwalsh.name/ajax-endpoint", true);
request.send(null);

當(dāng)然我們的JavaScript框架可以讓我們?cè)敢馊ビ肵HR，但是你看到的只是一個(gè)簡(jiǎn)單的例子。

fetch方法可以在window作用域中找到。第一個(gè)參數(shù)是你要訪問(wèn)的URL：

fetch("https://davidwalsh.name/some/url", {
    method: "get"
}).then(function(response) {
    
}).catch(function(err) {
    // Error :(
});

fetch會(huì)返回一個(gè)Promise作為結(jié)果：

// 簡(jiǎn)單的返回結(jié)果處理
fetch("https://davidwalsh.name/some/url").then(function(response) {
    
}).catch(function(err) {
    // Error :(
});

// 更高級(jí)的鏈?zhǔn)教幚?fetch("https://davidwalsh.name/some/url").then(function(response) {
    return //...
}).then(function(returnedValue) {
    // ...
}).catch(function(err) {
    // Error :(
});

請(qǐng)求能不能靈活使用就在于是否能靈活的設(shè)置請(qǐng)求的頭。可以使用new Headers():

// 創(chuàng)建一個(gè)空的Headers實(shí)例
var headers = new Headers();

// 添加內(nèi)容
headers.append("Content-Type", "text/plain");
headers.append("X-My-Custom-Header", "CustomValue");

// 檢查Headers的值
headers.has("Content-Type"); // true
headers.get("Content-Type"); // "text/plain"
headers.set("Content-Type", "application/json");

// 刪除一個(gè)Header
headers.delete("X-My-Custom-Header");

// 添加初始值
var headers = new Headers({
    "Content-Type": "text/plain",
    "X-My-Custom-Header": "CustomValue"
});

你可以使用append, has, get, set和delete方法來(lái)設(shè)置請(qǐng)求的頭。要使用Request頭，需要?jiǎng)?chuàng)建一個(gè)Request實(shí)例：

var request = new Request("https://davidwalsh.name/some-url", {
    headers: new Headers({
        "Content-Type": "text/plain"
    })
});

fetch(request).then(function() { /* handle response */ });

我們來(lái)看看Response和Request都可以做什么。

一個(gè)Request實(shí)例代表了一個(gè)fetch的請(qǐng)求部分。給fetch 傳入一個(gè)request你可以發(fā)出高級(jí)的、定制的請(qǐng)求：

method - GET, POST, PUT, DELETE, HEAD

url - URL of the request

headers - associated Headers object

referrer - referrer of the request

mode - cors, no-cors, same-origin

credentials - should cookies go with the request? omit, same-origin

redirect - follow, error, manual

integrity - subresource integrity value

cache - cache mode (default, reload, no-cache)

一個(gè)簡(jiǎn)單的Request看起來(lái)是這樣的：

var request = new Request("https://davidwalsh.name/users.json", {
    method: "POST", 
    mode: "cors", 
    redirect: "follow",
    headers: new Headers({
        "Content-Type": "text/plain"
    })
});

// 用起來(lái)
fetch(request).then(function() { /* handle response */ });

只有第一個(gè)參數(shù)，請(qǐng)求的URL，是必須的。一旦Request創(chuàng)建，它所有的屬性都是只讀的。需要注意的是Request有一個(gè)clone方法，這個(gè)方法在Worker API里使用fetch 的時(shí)候很有用。fetch的簡(jiǎn)化調(diào)用方法：

fetch("https://davidwalsh.name/users.json", {
    method: "POST", 
    mode: "cors", 
    redirect: "follow",
    headers: new Headers({
        "Content-Type": "text/plain"
    })
}).then(function() { /* handle response */ });

使用fetch的then方法會(huì)獲得一個(gè)Response實(shí)例。你也可以自己創(chuàng)建一個(gè)。

type - basic, cors

url

useFinalURL - Boolean for if url is the final URL

status - status code (ex: 200, 404, etc.)

ok - Boolean for successful response (status in the range 200-299)

statusText - status code (ex: OK)

headers - Headers object associated with the response.

// 在service worker測(cè)試的時(shí)候
// 使用new Response(BODY, OPTIONS)創(chuàng)建一個(gè)response
var response = new Response(".....", {
    ok: false,
    status: 404,
    url: "/"
});

// The fetch的 `then`會(huì)獲得一個(gè)response實(shí)例
fetch("https://davidwalsh.name/")
    .then(function(responseObj) {
        console.log("status: ", responseObj.status);
    });

Response實(shí)例也提供了如下的方法：

clone() - Creates a clone of a Response object.

error() - Returns a new Response object associated with a network error.

redirect() - Creates a new response with a different URL.

arrayBuffer() - Returns a promise that resolves with an ArrayBuffer.

blob() - Returns a promise that resolves with a Blob.

formData() - Returns a promise that resolves with a FormData object.

json() - Returns a promise that resolves with a JSON object.

text() - Returns a promise that resolves with a USVString (text).

假設(shè)你有一個(gè)請(qǐng)求會(huì)返回JSON。

fetch("https://davidwalsh.name/demo/arsenal.json").then(function(response) { 
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(j); 
});

當(dāng)然也可以用JSON.parse(jsonString)，但是json方法更加簡(jiǎn)單易用。

不是所有的接口都返回JSON格式的數(shù)據(jù)，所以還要處理一些Text/HTML類型的返回結(jié)果。

fetch("/next/page")
  .then(function(response) {
    return response.text();
  }).then(function(text) { 
      // 
處理Blob返回
如果你想要通過(guò)fetch加載一個(gè)blob的話，會(huì)有一點(diǎn)不同：
fetch("https://davidwalsh.name/flowers.jpg")
    .then(function(response) {
      return response.blob();
    })
    .then(function(imageBlob) {
      document.querySelector("img").src = URL.createObjectURL(imageBlob);
    });
POST Form數(shù)據(jù)
另一個(gè)經(jīng)常會(huì)遇到的情況是使用AJAX提交表單數(shù)據(jù)。
fetch("https://davidwalsh.name/submit", {
    method: "post",
    body: new FormData(document.getElementById("comment-form"))
});
最后
fetchAPI很好用，但是現(xiàn)在還不允許取消一個(gè)請(qǐng)求。無(wú)論如何，有了fetch之后，我們可以簡(jiǎn)單的發(fā)出AJAX請(qǐng)求了。更多關(guān)于fetch 的內(nèi)容可以參考Github下他們的repo。