Fetch API

AJie 發布于2019-08-21 10:55 / 429人閱讀

摘要：遍歷所有的字段，接受一個回調函數，和可選的第二個參數。構造函數接受的參數和函數的參數形式一樣，實際上方法會使用傳入的參數構造出一個對象來。

Fetch API

Fetch API 旨在用來簡化 HTTP 請求，它包含以下類和方法：

fetch 方法：用于發起 HTTP 請求

Request 類：用來描述請求

Response 類：用來表示響應

Headers 類：用來表示 HTTP 頭部信息

基本用法

fetch 方法接受一個表示 url 的字符串或者一個 Request 對象作為參數，返回 Promise 對象。請求成功后將結果封裝為 Response 對象。Response 對象上具有 json、text 等方法，調用這些方法后可以獲得不同類型的結果。Response 對象上的這些方法同樣返回 Promise 對象。

因此基本的使用方法如下：

// 發起請求
fetch("https://api.github.com/repos/facebook/react").then(function(res){
    // 請求成功，得到 response 對象，調用 response 對象的 json 方法并返回
    return res.json();
}).then(function(data){
    // response 對象的 json 方法執行成功，得到結果
    console.log(data)
});

更多高級用法和配置，詳見下面介紹。

fetch 方法

fetch 方法的第一個參數可以是 Request 對象，也可以是一個 url，第二個參數可選，包含一些配置信息。fetch 方法返回 Promise。

Promise fetch(String url [, Object options]);
Promise fetch(Request req [, Object options]);

配置信息包含下列內容：

method：請求的方法，如： GET、 POST

headers：請求頭部信息，可以是一個 Headers 對象的實例，也可以是一個簡單對象

body: 需要發送的數據，可以是 Blob, BufferSource, FormData, URLSearchParams, 或者 USVString。需要注意的是 GET 和 HEAD 方法不能包含 body。

mode：請求的模式，常見取值如下：

same-origin：只允許同源的請求，否則直接報錯

cors：允許跨域，但要求響應中包含 Access-Control-Allow-* 這類表示 CORS 的頭部信息，且響應中只有部分頭部信息（ Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma）可以讀取，但響應內容可以不受限地讀取。

no-cors：允許跨域請求那些響應中沒有包含 CORS 頭信息的域，但是響應內容是不可讀取的。使用使用這種模式配合 ServiceWorkers 可以實現預加載一些資源。

credentials：表示是否發送 cookie，有三個可選值 omit, same-origin, include

omit：不發生 cookie

same-origin：僅在同源時發生 cookie

include：發送 cookie

cache：表示處理緩存的策略，可選值為 default、no-store、reload、no-cache、force-cache、only-if-cached，關于此可以參考https://fetch.spec.whatwg.org

redirect：發生重定向時候的策略。有以下可選值：

follow：跟隨

error：發生錯誤

manual：需要用戶手動跟隨

referrer：一個字符串，可以是 no-referrer, client, 或者是一個 URL。默認值是 client。

integrity：包含一個用于驗證子資源完整性的字符串。關于此，可以參看 Subresource Integrity 介紹

該函數返回一個 Promise 對象，若請求成功會用 Response 的實例作為參數調用 resolve ，若請求失敗會用一個錯誤對象來調用 reject。

Headers 類

Headers 類用來表示 HTTP 的頭部信息，其構造函數可以接受一個表示 HTTP 頭信息的對象，也可以接受一個 Headers 類的實例作為對象：

var header = new Headers({
  "Content-Type": "image/jpeg",
  "Accept-Charset": "utf-8"
});

var anotherHeader = new Headers(header);

Headers 實例的方法 append

對一個字段追加信息，如果該字段不存在，就創建一個。

var header = new Headers();
header.append("Accept-Encoding", "deflate");
header.append("Accept-Encoding", "gzip");
// Accept-Encoding: ["deflate", "gzip"]

delete

刪除某個字段

get

獲得某個字段的第一個值

var header = new Headers();
header.append("Accept-Encoding", "deflate");
header.append("Accept-Encoding", "gzip");

header.get("Accept-Encoding"); //=> "deflate"

getAll

獲得某個字段所有的值

var header = new Headers();
header.append("Accept-Encoding", "deflate");
header.append("Accept-Encoding", "gzip");

header.getAll("Accept-Encoding"); //=> ["deflate", "gzip"]

has

判斷是否存在某個字段

set

設置一個字段，如果該字段已經存在，那么會覆蓋之前的。

forEach

遍歷所有的字段，接受一個回調函數，和可選的第二個參數?？蛇x的第二個參數地值作為回調函數的 this 值。

var header = new Headers();
header.append("Accept-Encoding", "deflate");

header.forEach(function(value, name, header){
  //...
},this);

Request 類

Request 對象用于描述請求內容。構造函數接受的參數和 fetch 函數的參數形式一樣，實際上 fetch 方法會使用傳入的參數構造出一個 Request 對象來。

下面例子從 github 抓取到 react 的 star 數并打印出來。

var req = new Request("https://api.github.com/repos/facebook/react",{
  method:"GET"
});

fetch(req).then(function(res){
  return res.json()
}).then(function(data){
  console.log(data.stargazers_count)
});

Request 實例的屬性

以下屬性均為只讀屬性。這些屬性的意義均在上面介紹 fetch 的參數的時候有過說明。

method

url

headers

referrer

referrerPolicy：處理來源信息的策略，關于此可以參見Referrer Policy

mode

credentials

redirect

integrity

cache

Response 類

Response 用來表示 HTTP 請求的響應。其構造函數形式如下：

var res = new Response(body, init);

其中 body 可以是：

Blob

BufferSource

FormData

URLSearchParams

USVString

init 是一個對象，其中包括以下字段：

status：響應的狀態碼，比如 200，404

statusText：狀態信息，比如 OK

headers: 頭部信息，可以是一個對象，也可以是一個 Headers 實例

Response 實例的屬性

以下屬性均為只讀屬性

bodyUsed：用于表示響應內容是否有被使用過

headers：頭部信息

ok：表明請求是否成功，當響應的狀態碼是 200~299 時，該值為 true

status：狀態碼

statusText：狀態信息

type：表明了響應的類型，可能是下面幾種值：

basic：同源

cors：跨域

error：出錯

opaque：Request 的 mode 設置為 no-cors 的時候響應式不透明了，這個時候 type 為 opaque

url：響應的地址

Response 實例的方法

clone：復制一個響應對象

要想從 Response 的實例中拿到最終的數據需要調用下面這些方法，這些方法都返回一個 Promise 并且使用對應的數據類型來 resolve。

arrayBuffer：把響應數據轉化為 arrayBuffer 來 resolve

blob：把響應數據轉換為 Blob 來 resolve

formData：把響應數據轉化為 formData 來 resolve

json：把響應數據解析為對象后 resolve

text：把響應數據當做字符串來調用 resolve

總結

最后在把上面使用例子進行一個細致的說明：

// 構造出 Request 對象
var req = new Request("https://api.github.com/repos/facebook/react",{
  method:"GET"
});

// 發起請求，fetch 方法返回一個 Promise 對象
fetch(req).then(function(res){
  // 得到了 response，這里調用 response 的 json 方法
  // 該方法同樣返回一個 Promise
  return res.json();
}).then(function(data){
  // 得到解析后的對象
  console.log(data.stargazers_count)
});

可以看出 fetch 方法使用起來比 XMLHttpRequest 要方便的多，關于其兼容性，可以參考這里，對于不兼容的瀏覽器，你可以使用 polyfill。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86406.html

$.ajax vs axios vs fetch

摘要：使用它可以讓頁面請求少量的數據，而不用刷新整個頁面。這是一個比較粗糙的，不符合關注分離的設計原則，配置和使用都不是那么友好。它的一個優勢異步操作，但的異步操作是基于事件的異步模型，沒有那么友好。 Ajax 是什么？答：Ajax是一種可以在瀏覽器和服務器之間使用異步數據傳輸（HTTP請求）的技術。使用它可以讓頁面請求少量的數據，而不用刷新整個頁面。而傳統的頁面（不使用Ajax）要刷新...

bitkylin 2019-08-23 12:22 評論0 收藏0
js基礎進階--從ajax到fetch的理解

摘要：使用它可以讓頁面請求少量的數據，而不用刷新整個頁面?；谑裁创鹚诘氖?。的庫答基于上面的原因，各種庫引用而生，然而最有名的就是的中的。它的一個優勢異步操作，但的異步操作是基于事件的異步模型，沒有那么友好。歡迎訪問我的個人博客：http://www.xiaolongwu.cn 基本知識 1. Ajax是什么？答：Ajax是一種可以在瀏覽器和服務器之間使用異步數據傳輸（HTTP請求）...

SoapEye 2019-08-23 14:44 評論0 收藏0
ES6 Fetch API HTTP請求實用指南

摘要：例子張三刪除用戶為了刪除用戶，我們首先需要定位用戶，然后我們定義方法類型。例子張三結論現在，你已基本了解如何使用的從服務器檢索或操作資源，以及如何處理。您可以使用本文作為如何構建操作的請求的指南。 showImg(https://segmentfault.com/img/bVbjxqh?w=1000&h=562); 本次將介紹如何使用Fetch API（ES6 +）對REST API的...

Sunxb 2019-08-23 13:12 評論0 收藏0
Fetch API

摘要：現在有很多優雅的包裝，但是這遠遠不夠。一個實例代表了一個的請求部分。一旦創建，它所有的屬性都是只讀的。處理基本的返回不是所有的接口都返回格式的數據，所以還要處理一些類型的返回結果。最后很好用，但是現在還不允許取消一個請求。 Fetch API 一個隱藏最深的秘密就是AJAX的實現底層的XMLHttpRequest，這個方法本來并不是造出來干這事的?，F在有很多優雅的API包裝XHR，但是...

princekin 2019-08-20 13:44 評論0 收藏0
fetch 如何請求數據

摘要：四請求常見數據格式接下來將介紹如何使用請求本地文本數據，請求本地數據以及請求網絡接口。請求網絡接口獲取中的數據，做法與獲取本地的方法類似得到數據后，同樣要經過處理一序言在傳統Ajax 時代，進行 API 等網絡請求都是通過XMLHttpRequest或者封裝后的框架進行網絡請求,然而配置和調用方式非?；靵y，對于剛入門的新手并不友好。今天我們介紹的Fetch提供了一個更好的替代方...

MarvinZhang 2019-08-30 15:54 評論0 收藏0
fetch 如何請求數據

摘要：四請求常見數據格式接下來將介紹如何使用請求本地文本數據，請求本地數據以及請求網絡接口。請求網絡接口獲取中的數據，做法與獲取本地的方法類似得到數據后，同樣要經過處理一序言在傳統Ajax 時代，進行 API 等網絡請求都是通過XMLHttpRequest或者封裝后的框架進行網絡請求,然而配置和調用方式非?；靵y，對于剛入門的新手并不友好。今天我們介紹的Fetch提供了一個更好的替代方...

Betta 2019-08-02 16:33 評論0 收藏0