Fetch API

Meils 發(fā)布于2019-08-20 12:12 / 3472人閱讀

ajax 寫了多年，也用了各種 ajax 庫，瀏覽器終于推出了一個原生的 Fetch API 實現(xiàn)ajax 功能。和 Fetch 一起的還有四個類：Headers Request Response Body

Fetch

window.fetch 判斷瀏覽器是否支持

fetch(url/request[, options])

request 是一個 Request 對象，后面詳細(xì)講

options 是一個對象，主要key 如下：
method: GET/POST等
headers: 一個普通對象，或者一個 Headers 對象
body: 傳遞給服務(wù)器的數(shù)據(jù)，可以是字符串/Buffer/Blob/FormData，如果方法是 GET/HEAD，則不能有此參數(shù)
mode: cors / no-cors / same-origin， 是否跨域，默認(rèn)是 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 / 或者一個url
referrerPolicy: no-referrer / no-referrer-when-downgrade / origin /  origin-when-cross-origin / unsafe-url
integrity: 資源完整性驗證

fetch() 返回一個 promise，所以這么用

fetch()
.then(response => {
  if (response.ok) {
  // 成功處理
  }
}).catch(error => {
  // 異常處理
})

網(wǎng)絡(luò)錯誤，權(quán)限問題等會報異常，404不算作異常
所以還需要通過 response.ok 判斷是否成功

例如：

var headers = new Headers();
headers.append("Content-Type", "image/jpeg");

/* headers 也可以是一個對象
 * {"Content-Type": "image/jpeg"}
*/
var init = {
  method: "GET",
  headers: headers,
  mode: "cors",
  cache: "default"
};

fetch("xxxxx.jpg", init)
.then(response => {
  // XXXX
});

Request

var request = new Request(url/request[, options]);
Request 參數(shù)和 fetch 參數(shù)相同

Headers

var headers = new Headers([init])
init 可以是一個普通對象或者是一個 Headers 對象

Headers對象有以下方法

append(key, value)
delete(key)
entries()  返回一個遍歷器，類似二維數(shù)組，每一個 key 和它對應(yīng)的 value 構(gòu)成一個數(shù)組
get(key) 獲取指定 key 的value，如果key被添加了多次，則返回第一次添加時的 value
getAll(key) 返回 key 對應(yīng)的所有 value，組成一個數(shù)組
has(key)
keys() 所有 key 組成的遍歷器
set(key, value) 更改 key 的值，如果 key 不存在，則相當(dāng)于 append
values() 所有 value 組成的遍歷器

Body

Request 和 Response 都實現(xiàn)了 Body 的功能，Body 的方法在下面 Response 中詳解

Response

var response = new Response([body][, init])
很少用到 new Response 一般是作為 fetch 返回的結(jié)果

response 有以下屬性，都是只讀的

headers
ok  status在 200 和 299 之間為 true
redirected  Boolean
status
statusText
type   basic / cors / error / opaque
url
bodyUsed

有以下方法

clone()
error()
redirect()

從 Body 實現(xiàn)的方法
arrayBuffer()
blob()  將body 解析為Blob文件，返回一個 promise
formData()
json()  將body 解析為json，返回一個 promise
text()  將body 解析為字符串，返回一個 promise

參考：
https://www.w3ctech.com/topic...
https://developer.mozilla.org...