使用Fetch怎么實現超時設置與終止請求

使用Fetch怎么實現超時設置與終止請求？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

1.基本使用

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

一個簡單的GET請求

fetch('https://www.baidu.com')
  .then(resp=>resp.text()) // 轉換成文本對象
  .then(resp=>console.log(resp)) // 輸出請求內容
  .catch(error => console.error(error));

一個簡單的POST請求

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

更多Fetch相關詳細，可查看MDN文檔 developer.mozilla.org/en-US/docs/…

2.超時設置

在使用XMLHttpRequest可以設置請求超時時間，可是轉用Fetch后，超時時間設置不見了,在網絡不可靠的情況下，超時設置往往很有用

ES6以后Promise 出現解決地獄回調等不優雅的代碼風格。個人理解這個更像是一個生產者和消費者的關系，查看 Promise文檔，有以下兩個方法

1. Promise.race([promise1,promise2]) 傳入多個Promise對象，等待最快對象完成

2. Promise.all([promise1,promise2]) 傳入多個Promise 對象，等待所有對象完成

有了以上知識后,結合函數setTimeout就可以實現超時設置

//ahutor:herbert qq:464884492
let timeoutPromise = (timeout) => {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve("我是 timeoutPromise，已經完成了");
  }, 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.取消請求

將上邊的代碼拷貝的瀏覽器控制臺并將network設置為Slow3G。運行就會發現，雖然我們在控制臺看到了超時信息，但切換到netwok頁簽中發現請求依然正常進行中，并返回了正確的內容。這并不是我想要的結果，我希望超時時間到了，請求也應該終止。

fetch請求成功后，默認返回一個Response對象，那么我們如何在代碼中構造一個這樣的對象呢?

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

AbortController 用于手動終止一個或多個DOM請求，通過該對象的AbortSignal注入的Fetch的請求中。所以需要完美實現timeout功能加上這個就對了

//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);
 });

關于使用Fetch怎么實現超時設置與終止請求問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。