JS中fetch()用法實(shí)例詳解

更新時(shí)間：2022年09月20日 09:58:03 作者：甜甜酷蓋

在JS中使用fetch更加高效地進(jìn)行網(wǎng)絡(luò)請(qǐng)求,下面這篇文章主要給大家介紹了關(guān)于JS中fetch()用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

了解fetch

- Fetch API 提供了一個(gè)獲取資源的接口（包括跨域請(qǐng)求），用于取代傳統(tǒng)的XMLHttpRequest的，在 JavaScript 腳本里面發(fā)出 HTTP 請(qǐng)求。

- 目前還沒(méi)有被所有瀏覽器支持，如果考慮低版本瀏覽器的問(wèn)題的話，引入https://github.com/github/fetch/blob/master/fetch.js即可兼容。

- Fetch API是基于promise的設(shè)計(jì)，返回的是Promise對(duì)象，它是為了取代傳統(tǒng)xhr的不合理的寫(xiě)法而生的。

沒(méi)有fetch時(shí)我們獲取異步資源的方式：

//舉例：發(fā)送一個(gè)get請(qǐng)求
//實(shí)例化一個(gè)XMLHttpResquest對(duì)象
var xhr = new XMLHttpResquest();
//注冊(cè)httpRequest.readyState改變時(shí)會(huì)回調(diào)的函數(shù),xhr.onreadystatechange
//readyState共有5個(gè)可能的值,
//0	UNSENT (未打開(kāi))	open()方法還未被調(diào)用;
//1	OPENED  (未發(fā)送)	send()方法還未被調(diào)用;
//2	HEADERS_RECEIVED (已獲取響應(yīng)頭)	send()方法已經(jīng)被調(diào)用, 響應(yīng)頭和響應(yīng)狀態(tài)已經(jīng)返回;
//3	LOADING (正在下載響應(yīng)體)	響應(yīng)體下載中; responseText中已經(jīng)獲取了部分?jǐn)?shù)據(jù);
//4	DONE (請(qǐng)求完成)	整個(gè)請(qǐng)求過(guò)程已經(jīng)完畢.
xhr.onreadystatechange = function(){
	//該回調(diào)函數(shù)會(huì)被依次調(diào)用4次
	console.log(xhr.resdyState);
	   //請(qǐng)求已完成
	if(xhr.readyState===4){
 //http狀態(tài)為200
   if(xhr.status===200){
     //打印響應(yīng)來(lái)的數(shù)據(jù)
     console.log(xhr.response);
	//JSON.parse()將JSON格式的字符串轉(zhuǎn)化為JSON對(duì)象
     var data = JSON.parse(xhr.response);
     //打印得到的JSON對(duì)象
     console.log(data);
   }
 }
}
//請(qǐng)求的網(wǎng)址
var url = '網(wǎng)址';;
//該方法為初始化請(qǐng)求,第一個(gè)參數(shù)是請(qǐng)求的方法,比如GET,POST,PUT,第二個(gè)參數(shù)是請(qǐng)求的url,第三個(gè)參數(shù)為true表示發(fā)送異步請(qǐng)求
xhr.open('GET',url,true);

//設(shè)置http請(qǐng)求頭
httpRequest.setRequestHeader("Content-Type","application/json");

//發(fā)出請(qǐng)求,參數(shù)為要發(fā)送的body體,如果是GET方法的話，一般無(wú)需發(fā)送body,設(shè)為空就可以
httpRequest.send(null);

使用fetch后我們獲取異步資源的方式

//請(qǐng)求的網(wǎng)址
var url = '網(wǎng)址';;
//發(fā)起get請(qǐng)求
var promise = fetch(url).then(function(response) {

   //response.status表示響應(yīng)的http狀態(tài)碼
   if(response.status === 200){
     //json是返回的response提供的一個(gè)方法,會(huì)把返回的json字符串反序列化成對(duì)象,也被包裝成一個(gè)Promise了
     return response.json();
   }else{
     return {}
   }
});
    
promise = promise.then(function(data){
  //響應(yīng)的內(nèi)容
	console.log(data);
}).catch(function(err){
	console.log(err);
})

比較：

fetch()使用 Promise，不使用回調(diào)函數(shù)，因此大大簡(jiǎn)化了寫(xiě)法，寫(xiě)起來(lái)更簡(jiǎn)潔。
fetch()采用模塊化設(shè)計(jì)，API 分散在多個(gè)對(duì)象上（Response 對(duì)象、Request 對(duì)象、Headers 對(duì)象），更合理一些；相比之下，XMLHttpRequest 的 API 設(shè)計(jì)并不是很好，輸入、輸出、狀態(tài)都在同一個(gè)接口管理，容易寫(xiě)出非?；靵y的代碼。
fetch()通過(guò)數(shù)據(jù)流（Stream對(duì)象）處理數(shù)據(jù)，可以分塊讀取，有利于提高網(wǎng)站性能表現(xiàn)，減少內(nèi)存占用，對(duì)于請(qǐng)求大文件或者網(wǎng)速慢的場(chǎng)景相當(dāng)有用。XMLHTTPRequest對(duì)象不支持?jǐn)?shù)據(jù)流，所有的數(shù)據(jù)必須放在緩存里，不支持分塊讀取，必須等待全部拿到后，再一次性吐出來(lái)。

fetch的語(yǔ)法

fetch(url)
  .then(...)
  .catch(...)

示例：

fetch('網(wǎng)址')
	// fetch()接收到的response是一個(gè) Stream 對(duì)象
	// response.json()是一個(gè)異步操作，取出所有內(nèi)容，并將其轉(zhuǎn)為 JSON 對(duì)象
  .then(response => response.json()) 
  .then(json => console.log(json))//獲取到的json數(shù)據(jù)
  .catch(err => console.log('Request Failed', err)); 

// 等價(jià)于以下寫(xiě)法
async function getJSON() {
  let url = '網(wǎng)址';
  try {
    let response = await fetch(url);
    return await response.json();
  } catch (error) {
    console.log('Request Failed', error);
  }
}
console.log(getJSON());	// 獲取到的json數(shù)據(jù)

fetch的Response對(duì)象

1.同步屬性

fetch()請(qǐng)求成功以后，得到的是一個(gè) Response 對(duì)象。它對(duì)應(yīng)服務(wù)器的 HTTP 回應(yīng)。
Response 包含的數(shù)據(jù)通過(guò) Stream 接口異步讀取，但是它還包含一些同步屬性，對(duì)應(yīng) HTTP 回應(yīng)的標(biāo)頭信息（Headers），可以立即讀取。

示例：

async function getfetchText() {
  let response = await fetch('網(wǎng)址');
  console.log(response.status); // 獲取http狀態(tài)碼 //200
  console.log(response.statusText);	// 獲取http回應(yīng)的狀態(tài)信息
}
getfetchText()

標(biāo)頭信息的屬性有：

const response = await fetch(url);
 - response.ok：返回一個(gè)布爾值，表示請(qǐng)求是否成功
例如：true對(duì)應(yīng) HTTP 請(qǐng)求的狀態(tài)碼 200 到 299，false對(duì)應(yīng)其他的狀態(tài)碼。

 - response.status：返回一個(gè)數(shù)字，表示 HTTP 回應(yīng)的狀態(tài)碼
例如：200，表示成功請(qǐng)求

 - response.statusText屬性返回一個(gè)字符串，表示 HTTP 回應(yīng)的狀態(tài)信息
例如：請(qǐng)求成功以后，服務(wù)器返回"OK"

 - response.url：返回請(qǐng)求的 URL。
如果： URL 存在跳轉(zhuǎn)，該屬性返回的是最終 URL。

 - response.redirected：返回一個(gè)布爾值，表示請(qǐng)求是否發(fā)生過(guò)跳轉(zhuǎn)。

 - response.type：返回請(qǐng)求的類型?？赡艿闹等缦拢?
basic：普通請(qǐng)求，即同源請(qǐng)求。
cors：跨域請(qǐng)求。
error：網(wǎng)絡(luò)錯(cuò)誤，主要用于 Service Worker。

2.判斷請(qǐng)求是否成功發(fā)出

第一種方法：

fetch()發(fā)出請(qǐng)求以后，只有網(wǎng)絡(luò)錯(cuò)誤或者無(wú)法連接時(shí)，fetch()才會(huì)報(bào)錯(cuò)，其他情況都不會(huì)報(bào)錯(cuò)，而是認(rèn)為請(qǐng)求成功。
只有通過(guò)Response.status屬性，得到HTTP 回應(yīng)的真實(shí)狀態(tài)碼，才能判斷請(qǐng)求是否成功

示例：

async function getfetchText() {
  let response = await fetch('網(wǎng)址');
  if (response.status >= 200 && response.status < 300) {
    return await response.text();
  } else {
    throw new Error(response.statusText);
  }
}

第二種方法：

判斷response.ok是否為true

示例：

if (response.ok) {
  // 請(qǐng)求成功
  console.log('請(qǐng)求成功')
} else {
  // 請(qǐng)求失敗
  console.log(‘請(qǐng)求失敗')
}

3.操作標(biāo)頭

Response 對(duì)象還有一Response.headers屬性，指向一個(gè) Headers 對(duì)象，對(duì)應(yīng) HTTP 回應(yīng)的所有標(biāo)頭。
Headers 對(duì)象可以使用for…of循環(huán)進(jìn)行遍歷

示例：

const response = await fetch(url);

for (let [key, value] of response.headers) { 
  console.log(`${key} : ${value}`);  
}

// 或者

for (let [key, value] of response.headers.entries()) { 
//response.heasers.entries()方法返回一個(gè)遍歷器，可以依次遍歷所有鍵值對(duì)([key,value])
  console.log(`${key} : ${value}`);  
}

用來(lái)操作標(biāo)頭的方法有：

下面的有些方法可以修改標(biāo)頭，那是因?yàn)槔^承自 Headers 接口。對(duì)于 HTTP回應(yīng)來(lái)說(shuō)，修改標(biāo)頭意義不大，況且很多標(biāo)頭是只讀的，瀏覽器不允許修改。

比較常用的也就是response.headers.get()

const response = await fetch(url);
response.headers.get()：根據(jù)指定的鍵名，返回鍵值。
response.headers.has()：返回一個(gè)布爾值，表示是否包含某個(gè)標(biāo)頭。
response.headers.set()：將指定的鍵名設(shè)置為新的鍵值，如果該鍵名不存在則會(huì)添加。
response.headers.append()：添加標(biāo)頭。
response.headers.delete()：刪除標(biāo)頭。
response.headers.keys()：返回一個(gè)遍歷器，可以依次遍歷所有鍵名。
response.headers.values()：返回一個(gè)遍歷器，可以依次遍歷所有鍵值。
response.headers.entries()：返回一個(gè)遍歷器，可以依次遍歷所有鍵值對(duì)（[key, value]）。
response.headers.forEach()：依次遍歷標(biāo)頭，每個(gè)標(biāo)頭都會(huì)執(zhí)行一次參數(shù)函數(shù)。

4.讀取Response對(duì)象內(nèi)容的方法

const response = await fetch(url);
response.text()：得到文本字符串，用于獲取文本數(shù)據(jù)，比如 HTML 文件。
response.json()：得到 JSON 對(duì)象。
response.blob()：得到二進(jìn)制 Blob 對(duì)象，例如讀取圖片文件，顯示在網(wǎng)頁(yè)上。
response.formData()：得到 FormData 表單對(duì)象，主要用在 Service Worker 里面，攔截用戶提交的表單，修改某些數(shù)據(jù)以后，再提交給服務(wù)器。
response.arrayBuffer()：得到二進(jìn)制 ArrayBuffer 對(duì)象，主要用于獲取流媒體文件。

5.創(chuàng)建副本（clone）

Stream 對(duì)象只能讀取一次，讀取完就沒(méi)了,這意味著五個(gè)讀取方法，只能使用一個(gè)，否則會(huì)報(bào)錯(cuò)。

示例：

// 先使用了response.text()，就把 Stream 讀完了。
// 后面再調(diào)用response.json()，就沒(méi)有內(nèi)容可讀了，所以報(bào)錯(cuò)。
let text =  await response.text();
let json =  await response.json();  // 報(bào)錯(cuò)

Response 對(duì)象提供Response.clone()方法，創(chuàng)建Response對(duì)象的副本，實(shí)現(xiàn)多次讀取。

示例：

const response1 = await fetch('圖片地址');
// response.clone()復(fù)制了一份 Response 對(duì)象，然后將同一張圖片讀取了兩次
const response2 = response1.clone();

const myBlob1 = await response1.blob();
const myBlob2 = await response2.blob();

image1.src = URL.createObjectURL(myBlob1);
image2.src = URL.createObjectURL(myBlob2);

6.底層接口

Response.body是 Response 對(duì)象暴露出的底層接口，返回一個(gè) ReadableStream 對(duì)象，供用戶操作

例如：用來(lái)分塊讀取內(nèi)容，顯示下載的進(jìn)度

const response = await fetch('圖片地址');
// response.body.getReader()方法返回一個(gè)遍歷器
const reader = response.body.getReader();

while(true) {
  // 這個(gè)遍歷器的read()方法每次返回一個(gè)對(duì)象，表示本次讀取的內(nèi)容塊
  const {done, value} = await reader.read();
  // done屬性是一個(gè)布爾值，用來(lái)判斷有沒(méi)有讀完
  if (done) {
    break;
  }
  // value屬性是一個(gè) arrayBuffer 數(shù)組，表示內(nèi)容塊的內(nèi)容，而value.length屬性是當(dāng)前塊的大小
  console.log(`Received ${value.length} bytes`)
}

定制HTTP請(qǐng)求

fetch()的第一個(gè)參數(shù)是 URL，還可以接受第二個(gè)參數(shù)optionObj，作為配置對(duì)象，定制發(fā)出的 HTTP 請(qǐng)求。

HTTP 請(qǐng)求的方法、標(biāo)頭、數(shù)據(jù)體都在這個(gè)optionObj對(duì)象里面設(shè)置

fetch(url,optionObj)

fetch()請(qǐng)求的底層用的是 Request() 對(duì)象的接口，參數(shù)完全一樣，因此上面的 API 也是 Request()的 API

fetch()的第二個(gè)參數(shù)的完整API如下：

const response = fetch(url, {
  method: "GET",//請(qǐng)求方式
  headers: {//定制http請(qǐng)求的標(biāo)頭
    "Content-Type": "text/plain;charset=UTF-8"
  },
  body: undefined,//post請(qǐng)求的數(shù)據(jù)體，因?yàn)榇藭r(shí)為get請(qǐng)求，故為undefined
  referrer: "about:client",
  referrerPolicy: "no-referrer-when-downgrade",//用于設(shè)定fetch請(qǐng)求的referer標(biāo)頭
  mode: "cors", //指定請(qǐng)求模式，此時(shí)為cors表示支持跨域請(qǐng)求
  credentials: "same-origin",//發(fā)送cookie
  cache: "default",//指定如何處理緩存
  redirect: "follow",
  integrity: "",
  keepalive: false,
  signal: undefined 
});

參數(shù)詳解：

method：HTTP 請(qǐng)求的方法，POST、DELETE、PUT都在這個(gè)屬性設(shè)置。

headers：一個(gè)對(duì)象，用來(lái)定制 HTTP 請(qǐng)求的標(biāo)頭。

body：POST 請(qǐng)求的數(shù)據(jù)體。

cache：指定如何處理緩存。可能的取值如下：
/*
	default：默認(rèn)值，先在緩存里面尋找匹配的請(qǐng)求。
	no-store：直接請(qǐng)求遠(yuǎn)程服務(wù)器，并且不更新緩存。
	reload：直接請(qǐng)求遠(yuǎn)程服務(wù)器，并且更新緩存。
	no-cache：將服務(wù)器資源跟本地緩存進(jìn)行比較，有新的版本才使用服務(wù)器資源，否則使用緩存。
	force-cache：緩存優(yōu)先，只有不存在緩存的情況下，才請(qǐng)求遠(yuǎn)程服務(wù)器。
	only-if-cached：只檢查緩存，如果緩存里面不存在，將返回504錯(cuò)誤。
*/
mode: 指定請(qǐng)求的模式?？赡艿娜≈等缦拢?
/*
	cors：默認(rèn)值，允許跨域請(qǐng)求。
	same-origin：只允許同源請(qǐng)求。
	no-cors：請(qǐng)求方法只限于 GET、POST 和 HEAD，并且只能使用有限的幾個(gè)簡(jiǎn)單標(biāo)頭，不能添加跨域的復(fù)雜標(biāo)頭，相當(dāng)于提交表單所能發(fā)出的請(qǐng)求。
*/
credentials：指定是否發(fā)送 Cookie?？赡艿娜≈等缦拢?
/*
	same-origin：默認(rèn)值，同源請(qǐng)求時(shí)發(fā)送 Cookie，跨域請(qǐng)求時(shí)不發(fā)送。
	include：不管同源請(qǐng)求，還是跨域請(qǐng)求，一律發(fā)送 Cookie。
	omit：一律不發(fā)送。
*/
signal：指定一個(gè) AbortSignal 實(shí)例，用于取消fetch()請(qǐng)求

keepalive：用于頁(yè)面卸載時(shí)，告訴瀏覽器在后臺(tái)保持連接，繼續(xù)發(fā)送數(shù)據(jù)。
/*
一個(gè)典型的場(chǎng)景就是，用戶離開(kāi)網(wǎng)頁(yè)時(shí)，腳本向服務(wù)器提交一些用戶行為的統(tǒng)計(jì)信息。
這時(shí)，如果不用keepalive屬性，數(shù)據(jù)可能無(wú)法發(fā)送，因?yàn)闉g覽器已經(jīng)把頁(yè)面卸載了。
*/
redirect: 指定 HTTP 跳轉(zhuǎn)的處理方法。可能的取值如下：
/*
	follow：默認(rèn)值，fetch()跟隨 HTTP 跳轉(zhuǎn)。
	error：如果發(fā)生跳轉(zhuǎn)，fetch()就報(bào)錯(cuò)。
	manual：fetch()不跟隨 HTTP 跳轉(zhuǎn)，但是response.url屬性會(huì)指向新的 URL，response.redirected屬性會(huì)變?yōu)閠rue，由開(kāi)發(fā)者自己決定后續(xù)如何處理跳轉(zhuǎn)。
*/
integrity：指定一個(gè)哈希值，用于檢查 HTTP 回應(yīng)傳回的數(shù)據(jù)是否等于這個(gè)預(yù)先設(shè)定的哈希值。
/*
比如，下載文件時(shí)，檢查文件的 SHA-256 哈希值是否相符，確保沒(méi)有被篡改
fetch('http://site.com/file', {
  integrity: 'sha256-abcdef'
});
*/
referrer: 用于設(shè)定fetch請(qǐng)求的referer標(biāo)頭。
/*
這個(gè)屬性可以為任意字符串，也可以設(shè)為空字符串（即不發(fā)送referer標(biāo)頭）。
*/
referrerPolicy: 用于設(shè)定Referer標(biāo)頭的規(guī)則?？赡艿娜≈等缦拢?
/*
	no-referrer-when-downgrade：默認(rèn)值，總是發(fā)送Referer標(biāo)頭，除非從 HTTPS 頁(yè)面請(qǐng)求 HTTP 資源時(shí)不發(fā)送。
	no-referrer：不發(fā)送Referer標(biāo)頭。
	origin：Referer標(biāo)頭只包含域名，不包含完整的路徑。
	origin-when-cross-origin：同源請(qǐng)求Referer標(biāo)頭包含完整的路徑，跨域請(qǐng)求只包含域名。
	same-origin：跨域請(qǐng)求不發(fā)送Referer，同源請(qǐng)求發(fā)送。
	strict-origin：Referer標(biāo)頭只包含域名，HTTPS 頁(yè)面請(qǐng)求 HTTP 資源時(shí)不發(fā)送Referer標(biāo)頭。
	strict-origin-when-cross-origin：同源請(qǐng)求時(shí)Referer標(biāo)頭包含完整路徑，跨域請(qǐng)求時(shí)只包含域名，HTTPS 頁(yè)面請(qǐng)求 HTTP 資源時(shí)不發(fā)送該標(biāo)頭。
	unsafe-url：不管什么情況，總是發(fā)送Referer標(biāo)頭。
*/

取消fetch請(qǐng)求

fetch()請(qǐng)求發(fā)送后，如果中途想要取消，需要使用AbortController對(duì)象

//創(chuàng)建一個(gè)AbortController實(shí)例
let controller = new AbortController();

fetch(url, {
  signal: controller.signal
});
//給controller.signal綁定監(jiān)聽(tīng)事件，controller.signal的值改變則會(huì)觸發(fā)abort事件
controller.signal.addEventListener('abort',
  () => console.log('abort!')
);
// controller.abort()方法用于發(fā)出取消信號(hào)。這時(shí)會(huì)觸發(fā)abort事件，這個(gè)事件可以監(jiān)聽(tīng)

controller.abort(); // 取消

// 可以通過(guò)controller.signal.aborted屬性判斷取消信號(hào)是否已經(jīng)發(fā)出
console.log(controller.signal.aborted); // true

實(shí)例：

//創(chuàng)建實(shí)例
let controller = new AbortController();
//設(shè)置定時(shí)器
setTimeout(() => controller.abort(), 1000);

try {
  let response = await fetch('路徑', {
    signal: controller.signal
  });
} catch(err) {
  if (err.name == 'AbortError') {
    console.log('Aborted!');
  } else {
    throw err;
  }
}