JavaScript如何攔截全局Fetch的請求與響應詳解

更新時間：2024年04月15日 10:20:13 作者：SailingCoder

全局的fetch()方法用于發(fā)起獲取資源的請求,它返回一個promise,這個promise會在請求響應后被resolve,并傳回Response對象,這篇文章主要給大家介紹了關于JavaScript如何攔截全局Fetch的請求與響應的相關資料,需要的朋友可以參考下

前言

目前，團隊采用了根路徑轉發(fā)的方式，將接口請求轉發(fā)到服務器上，實現了一定的解耦。然而，隨著團隊后端策略的變化，現在希望前端直接請求一個新的接口域名，而不再經過中間層的處理。在這種情況下，由于之前的代碼中沒有對接口請求進行統(tǒng)一的封裝，需要考慮如何以最小的成本進行遷移。

Fetch API簡介

Fetch API是一種用于進行網絡請求和響應的現代Web API。它提供了一種簡單、強大且靈活的方式來處理HTTP請求。在使用Fetch API時，我們通常創(chuàng)建一個請求對象，然后使用fetch函數發(fā)送請求，并處理返回的Promise。

// GET請求示例：
fetch('https://your.api.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// POST請求示例：
fetch('https://your.api.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ id: 123, name: 'admin' }),
})
  .then(response => response.json())
  .then(data => console.log('POST Request:', data))
  .catch(error => console.error('POST Request Error:', error));

總體來說，使用Fetch API發(fā)送GET和POST請求的基本是相似的，但在POST請求中需要額外處理請求方法和請求體的數據。

注意：尤其是其中 GET 請求代碼的極簡風格，所以有時為了省事，直接就使用了fetch。這也為后面請求和響應的以及錯誤處理帶來不便性。有的伙伴可能會大面積的去改代碼，這樣不僅費時間，而且還需要測試，

全局Fetch攔截的需求

在一些情況下，我們可能希望在整個應用程序范圍內攔截和處理所有的Fetch請求和響應。這可能是為了添加全局的身份驗證、記錄請求和響應、處理錯誤等目的。為了實現這一點，我們可以使用window.fetch來攔截全局的Fetch。

攔截請求

要攔截全局的Fetch請求，我們可以重寫window.fetch方法。我們可以在這個方法中添加自定義的邏輯，然后調用原始的fetch方法。下面是一個簡單的例子：

const originalFetch = window.fetch;

window.fetch = function(url, options) {
  // 添加你的自定義邏輯
  console.log('Intercepted request to:', url);

  // 調用原始的fetch方法
  return originalFetch(url, options);
};

// 使用攔截后的fetch
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在上面的例子中，我們簡單地在攔截函數中輸出了請求的URL，并在最后調用了原始的fetch方法。這樣，我們就能在每個全局的Fetch請求之前執(zhí)行自定義的邏輯。

攔截響應

類似地，我們也可以攔截全局的Fetch響應。這可以讓我們在處理響應之前添加一些通用的邏輯，比如檢查響應的狀態(tài)碼、處理錯誤等。

const originalFetch = window.fetch;

window.fetch = function(url, options) {
  // 調用原始的fetch方法
  return originalFetch(url, options)
    .then(response => {
      // 添加你的自定義響應邏輯
      console.log('Intercepted response from:', url);

      // 返回原始的響應
      return response;
    });
};

// 使用攔截后的fetch
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在這個例子中，我們在攔截函數中輸出了響應的URL，并在最后返回了原始的響應。這允許我們在處理全局的Fetch響應之前執(zhí)行自定義的邏輯。

處理錯誤

在實際應用中，我們還需要考慮到錯誤處理。如果攔截過程中發(fā)生了錯誤，我們應該能夠適當地處理它們，以避免對應用程序的其他部分造成負面影響。

const originalFetch = window.fetch;

window.fetch = function(url, options) {
  try {
    // 添加你的自定義請求邏輯
    console.log('Intercepted request to:', url);

    // 調用原始的fetch方法
    return originalFetch(url, options)
      .then(response => {
        // 添加你的自定義響應邏輯
        console.log('Intercepted response from:', url);

        // 返回原始的響應
        return response;
      })
      .catch(error => {
        // 處理全局Fetch響應錯誤
        console.error('Intercepted response error:', error);
        throw error;
      });
  } catch (error) {
    // 處理全局Fetch請求錯誤
    console.error('Intercepted request error:', error);
    return Promise.reject(error);
  }
};

// 使用攔截后的fetch
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在上述例子中，我們使用了try和catch塊來捕獲可能發(fā)生的錯誤，并進行相應的處理。這有助于確保全局Fetch攔截不會導致應用程序的崩潰或不穩(wěn)定。