Fetch API 接口參考

前言

Fetch API是新的ajax解決方案，用於解決古老的XHR對象不能實現的問題，Fetch API 提供了一個獲取資源的接口（包括跨域請求），任何使用過 XMLHttpRequest 的人都能輕松上手，但新的API提供了更強大和靈活的功能集。

主要優點：

• 語法簡單，更加語義化
• 基於標准的Promises實現，支持async/await

概念和用法

Fetch 提供了對 Request 和 Response （以及其他與網絡請求有關的）對象的通用定義。使之今后可以被使用到更多地應用場景中：無論是service workers、Cache API、又或者是其他處理請求和響應的方式，甚至是任何一種需要你自己在程序中生成響應的方式。

它同時還為有關聯性的概念，例如CORS和HTTP原生頭信息，提供一種新的定義，取代它們原來那種分離的定義。

發送請求或者獲取資源，需要使用 WindowOrWorkerGlobalScope.fetch 方法。它在很多接口中都被實現了，更具體地說，是在Window 和 WorkerGlobalScope接口上。因此在幾乎所有環境中都可以用這個方法獲取到資源。

 fetch() 必須接受一個參數——資源的路徑。無論請求成功與否，它都返回一個 Promise 對象，resolve 對應請求的 Response。你也可以傳一個可選的第二個參數init（參見 Request）。

一旦 Response 被返回，就有一些方法可以使用了，比如定義內容或者處理方法（參見 Body）。

你也可以通過 Request() 和 Response() 的構造函數直接創建請求和響應，但是我們不建議這么做。他們應該被用於創建其他 API 的結果（比如，service workers 中的 FetchEvent.respondWith）。

注意：更多關於 Fetch API 的用法，參考 Using Fetch，以及一些概念 Fetch basic concepts。

最簡單典型的用法

本文假設一個服務器環境，有一個test.html和一個test.php。

fetch('test.php') 
    .then(function(res) { 
        res.json().then(function(data) { 
            console.log(data); 
        }); 
    }) 
    .catch(function(err) { 
        console.log('Fetch Error : %S', err); 
    })

Fetch API跟Promises的關系

console.log(fetch('test.php')); // 返回一個Promise對象

兩者關系就一句話：fetch()本身就返回一個Promise對象。所以，它就可以用Promises的所有方法。

fetch的參數

第一個參數：毫無疑問是要獲取資源的URL。

第二個參數：options對象，包括：

• 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。為了在當前域名內自動發送 cookie ， 必須提供這個選項， 從 Chrome 50 開始， 這個屬性也可以接受 FederatedCredential 實例或是一個 PasswordCredential 實例。
• cache: 請求的 cache 模式: default、 no-store 、 reload 、 no-cache 、 force-cache或者 only-if-cached 。
• redirect: 可用的 redirect 模式: follow (自動重定向), error (如果產生重定向將自動終止並且拋出一個錯誤), 或者 manual (手動處理重定向)，在Chrome中，Chrome 47之前的默認值是 follow，從 Chrome 47開始是 manual。
• referrer: 一個 USVString ，可以是 no-referrer、client或一個URL。默認是 client。
• referrerPolicy: Specifies the value of the referer HTTP header. May be one of no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
• integrity: 包括請求的 subresource integrity 值 （ 例如： sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。

上面諸多option中，其實常用的就是method、headers、body以及mode等。

注意：更多關於 Fetch API 的用法，參考 Using Fetch，以及一些概念 Fetch basic concepts。