1.基本使用

Fetch 是一個(gè)新的端獲取資源的接口，用于替換笨重繁瑣XMLHttpRequest.它有了Request 和 Response 以及Headers對(duì)象的概念，與后端語言請(qǐng)求資源更接近。

一個(gè)簡單的GET請(qǐng)求

fetch('https://www.baidu.com')
  .then(resp=>resp.text()) // 轉(zhuǎn)換成文本對(duì)象
  .then(resp=>console.log(resp)) // 輸出請(qǐng)求內(nèi)容
  .catch(error => console.error(error));

一個(gè)簡單的POST請(qǐng)求

fetch('https://www.easy-mock.com/mock/5ca59ba44ba86c23d507bd40/example/getUser',{method:"post"})
  .then(resp=>resp.json()) //轉(zhuǎn)換成Json對(duì)象
  .then(resp=>console.log(resp)) //輸出Json內(nèi)容
  .catch(error => console.error(error));

更多Fetch相關(guān)詳細(xì)，可查看MDN文檔 developer.mozilla.org/en-US/docs/…

2.超時(shí)設(shè)置

在使用XMLHttpRequest可以設(shè)置請(qǐng)求超時(shí)時(shí)間，可是轉(zhuǎn)用Fetch后，超時(shí)時(shí)間設(shè)置不見了,在網(wǎng)絡(luò)不可靠的情況下，超時(shí)設(shè)置往往很有用

ES6以后Promise 出現(xiàn)解決地獄回調(diào)等不優(yōu)雅的代碼風(fēng)格。個(gè)人理解這個(gè)更像是一個(gè)生產(chǎn)者和消費(fèi)者的關(guān)系，查看 Promise文檔，有以下兩個(gè)方法

1. Promise.race([promise1,promise2]) 傳入多個(gè)Promise對(duì)象，等待最快對(duì)象完成
2. Promise.all([promise1,promise2]) 傳入多個(gè)Promise 對(duì)象，等待所有對(duì)象完成

有了以上知識(shí)后,結(jié)合函數(shù)setTimeout就可以實(shí)現(xiàn)超時(shí)設(shè)置

//ahutor:herbert qq:464884492
let timeoutPromise = (timeout) => {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve("我是 timeoutPromise，已經(jīng)完成了");
  }, timeout);
 });
}
let requestPromise = (url) => {
 return fetch(url);
};
Promise.race([timeoutPromise(1000), requestPromise("https://www.baidu.com")])
 .then(resp => {
  console.log(resp);
 })
 .catch(error => {
  console.log(error);
 });

3.取消請(qǐng)求

將上邊的代碼拷貝的瀏覽器控制臺(tái)并將network設(shè)置為Slow3G。運(yùn)行就會(huì)發(fā)現(xiàn)，雖然我們?cè)诳刂婆_(tái)看到了超時(shí)信息，但切換到netwok頁簽中發(fā)現(xiàn)請(qǐng)求依然正常進(jìn)行中，并返回了正確的內(nèi)容。這并不是我想要的結(jié)果，我希望超時(shí)時(shí)間到了，請(qǐng)求也應(yīng)該終止。

fetch請(qǐng)求成功后，默認(rèn)返回一個(gè)Response對(duì)象，那么我們?nèi)绾卧诖a中構(gòu)造一個(gè)這樣的對(duì)象呢?

 timeoutResp=new Response("timeout", { status: 504, statusText: "timeout " })
 successResp=new Response("ok", { status: 200, statusText: "ok " })

AbortController 用于手動(dòng)終止一個(gè)或多個(gè)DOM請(qǐng)求，通過該對(duì)象的AbortSignal注入的Fetch的請(qǐng)求中。所以需要完美實(shí)現(xiàn)timeout功能加上這個(gè)就對(duì)了

//ahutor:herbert qq:464884492
let controller = new AbortController();
let signal = controller.signal;

let timeoutPromise = (timeout) => {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve(new Response("timeout", { status: 504, statusText: "timeout " }));
   controller.abort();
  }, timeout);
 });
}
let requestPromise = (url) => {
 return fetch(url, {
  signal: signal
 });
};
Promise.race([timeoutPromise(1000), requestPromise("https://www.baidu.com")])
 .then(resp => {
  console.log(resp);
 })
 .catch(error => {
  console.log(error);
 });

4.總結(jié)

第一次在項(xiàng)目中使用fetch，在面向API編程的過程中，發(fā)現(xiàn)fetch沒有超時(shí)的設(shè)置。第一時(shí)間查看了MDN文檔以及向搜索引擎找尋實(shí)現(xiàn)功能的靈感(copy+c)。有些朋友在settimeout中通過 reject(new Error('網(wǎng)絡(luò)超時(shí)'))實(shí)現(xiàn)。其實(shí)這樣只是讓前端感知當(dāng)前請(qǐng)求超時(shí)了，并沒有真正終止本次請(qǐng)求。所以必須借助AbortSignal信號(hào)對(duì)象。此功能目前還處于試驗(yàn)階段，使用需謹(jǐn)慎。

demo地址 https://github.com/464884492/blog/blob/master/demo/fetch/fetchdemo.js

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論