什么是Fetch API
Fetch API提供了一個(gè)獲取資源的接口装处，類(lèi)似于XMLHttpRequest方咆。
Fetch API中最基礎(chǔ)的的一個(gè)接口是fetch():
let url = 'http://example.com';
fetch(url)
.then(res => res.json())
.catch(error => console.log(error))
除了提供了fetch()這個(gè)函數(shù)，F(xiàn)etch API還定義了相應(yīng)的Request和Response
API語(yǔ)法
Promise<Response> fetch(input[, init]);
參數(shù)
-
input
定義要獲取的資源,可以是：
- 字符串褪储，包含要獲取資源的 URL
-
Request對(duì)象
-
init
請(qǐng)求的配置項(xiàng)卵渴，可選參數(shù)如下:
-
method: 請(qǐng)求使用的方法，如GET鲤竹、POST浪读。 -
headers: 請(qǐng)求的頭信息，形式為Headers的對(duì)象或包含ByteString值的對(duì)象字面量宛裕。 -
body: 請(qǐng)求的body信息,可能是一個(gè)Blob瑟啃、BufferSource、FormData揩尸、URLSearchParams或者USVString對(duì)象蛹屿。 -
mode: 請(qǐng)求的模式，如cors岩榆、no-cors或者same-origin错负。 -
credentials: 請(qǐng)求的credentials，如omit勇边、same-origin或者include犹撒。為了在當(dāng)前域名內(nèi)自動(dòng)發(fā)送cookie，必須提供這個(gè)選項(xiàng)粒褒。 -
cache: 請(qǐng)求的cache模式:default识颊、no-store、reload奕坟、no-cache祥款、force-cache或者only-if-cached。 -
redirect: 可用的redirect模式:follow(自動(dòng)重定向),error(如果產(chǎn)生重定向?qū)⒆詣?dòng)終止并且拋出一個(gè)錯(cuò)誤), 或者manual(手動(dòng)處理重定向)月杉。 -
referrer: 一個(gè)USVString可以是no-referrer刃跛、client或一個(gè)URL。默認(rèn)是client苛萎。
返回值
Promise,resolve時(shí)回傳Response對(duì)象桨昙。
異常
-
AbortError：請(qǐng)求被取消 -
TypeError: 如果URL中有用戶(hù)權(quán)限检号，例如：http://user:password@example.com
與ajax()的不同
- 當(dāng)服務(wù)端返回404或500時(shí)，
fetch()返回的Promise不會(huì)reject蛙酪，而是會(huì)resolve,但是response.ok的值會(huì)變成false齐苛。當(dāng)response的狀態(tài)碼是2XX時(shí)，response.ok的值會(huì)是true滤否。因此脸狸，在對(duì)response進(jìn)行處理之前最仑，需要先檢查response.ok藐俺。 - 默認(rèn)情況下，
fetch()發(fā)送請(qǐng)求時(shí)不會(huì)帶上cookies泥彤。要發(fā)送cookies欲芹，必須設(shè)置credentials選項(xiàng)，即第二個(gè)參數(shù)中的{credentials: 'include'}吟吝。
為什么有了Fetch API
要回答這個(gè)問(wèn)題菱父，首先需要思考的是，沒(méi)有Fetch API時(shí)用的是什么——Ajax剑逃，即對(duì)XMLHttpRequest的封裝浙宜。
一般會(huì)這樣使用XMLHttpRequest:
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE) {
if (this.status === 200) {
console.log(this.responseText);
} else {
console.log('There was a problem with the request.');
}
}
}
或者使用jquery:
$.ajax({
url: url,
method: 'GET',
success: function(data) {
console.log(data);
},
error: function(error) {
console.log(error);
}
});
而使用fetch()則會(huì)是這樣:
fetch(url, {method: 'GET'})
.then(function(res){console.log(res.json())})
.catch(function(error){console.log(error)});
從以上示例代碼中可以很直觀的看出，fetchAPI至少有以下幾個(gè)優(yōu)點(diǎn):
- 代碼簡(jiǎn)潔直觀蛹磺。
- 可以鏈?zhǔn)秸{(diào)用粟瞬。
總結(jié)
使用Promise API可以避免“回調(diào)地獄”。此外萤捆，fetch API對(duì)請(qǐng)求和響應(yīng)都作了規(guī)范裙品，使得在配置Request以及消費(fèi)Response時(shí)使用的API更加直觀。原生的XMLHttpRequest以及jquery都把所有的配置項(xiàng)揉合在一起俗或，配置起來(lái)十分不方便市怎。
當(dāng)然，F(xiàn)etch API也有缺陷辛慰，不支持取消請(qǐng)求区匠。一旦發(fā)起，不能中斷帅腌，也不會(huì)超時(shí)驰弄，只能等待被 resolve 或 reject。
另外狞膘，目前fetchAPI還存在部分兼容性的問(wèn)題揩懒，要在生產(chǎn)環(huán)境中使用的話(huà)，需要使用ployfill挽封。
