Fetch API

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

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

Fetch

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

fetch(url/request[, options])

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

options 是一個(gè)對(duì)象，主要key 如下：
method: GET/POST等
headers: 一個(gè)普通對(duì)象，或者一個(gè) Headers 對(duì)象
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 / 或者一個(gè)url
referrerPolicy: no-referrer / no-referrer-when-downgrade / origin /  origin-when-cross-origin / unsafe-url
integrity: 資源完整性驗(yàn)證

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

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

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

例如：

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

/* headers 也可以是一個(gè)對(duì)象
 * {"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 可以是一個(gè)普通對(duì)象或者是一個(gè) Headers 對(duì)象

Headers對(duì)象有以下方法

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

Body

Request 和 Response 都實(shí)現(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 實(shí)現(xiàn)的方法
arrayBuffer()
blob()  將body 解析為Blob文件，返回一個(gè) promise
formData()
json()  將body 解析為json，返回一個(gè) promise
text()  將body 解析為字符串，返回一個(gè) promise

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