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);
    });
複製代碼

4.總結

第一次在項目中使用fetch，在面向API編程的過程當中，發現fetch沒有超時的設置。第一時間查看了MDN文檔以及向搜索引擎找尋實現功能的靈感(copy+c)。有些朋友在settimeout中經過 reject(new Error('網絡超時'))實現。其實這樣只是讓前端感知當前請求超時了，並無真正終止本次請求。因此必須藉助AbortSignal信號對象。此功能目前還處於試驗階段，使用需謹慎。

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