JavaScript如何拦截全局Fetch的请求与响应详解

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

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

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

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