首页 前端知识 js如何拦截全局Fetch的请求和响应

js如何拦截全局Fetch的请求和响应

2024-10-29 23:10:20 前端知识 前端哥 502 482 我要收藏

目前,团队采用了根路径转发的方式,将接口请求转发到服务器上,实现了一定的解耦。然而,随着团队后端策略的变化,现在希望前端直接请求一个新的接口域名,而不再经过中间层的处理。在这种情况下,由于之前的代码中没有对接口请求进行统一的封装,需要考虑如何以最小的成本进行迁移。

Fetch API简介

Fetch API是一种用于进行网络请求和响应的现代Web API。它提供了一种简单、强大且灵活的方式来处理HTTP请求。在使用Fetch API时,我们通常创建一个请求对象,然后使用fetch函数发送请求,并处理返回的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发送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请求之前执行自定义的逻辑。

拦截响应

类似地,我们也可以拦截全局的Fetch响应。这可以让我们在处理响应之前添加一些通用的逻辑,比如检查响应的状态码、处理错误等。

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响应之前执行自定义的逻辑。

处理错误

在实际应用中,我们还需要考虑到错误处理。如果拦截过程中发生了错误,我们应该能够适当地处理它们,以避免对应用程序的其他部分造成负面影响。

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

在上述例子中,我们使用了trycatch块来捕获可能发生的错误,并进行相应的处理。这有助于确保全局Fetch拦截不会导致应用程序的崩溃或不稳定。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19512.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!