前端如何拦截请求

前端拦截请求的核心方法包括：使用Service Worker、拦截Fetch API、拦截XMLHttpRequest。在实际应用中，最常用的方法是拦截Fetch API。

通过拦截Fetch API，我们可以在请求发送之前和响应返回之后进行处理。具体来说，拦截Fetch API可以用于验证用户身份、添加通用的请求头、处理错误响应等。以下是一个详细描述：

使用拦截Fetch API处理请求

拦截Fetch API的基本思路是重写原生的Fetch函数，通过代理模式在请求发送之前和响应返回之后进行自定义处理。首先，我们需要保存原生的Fetch函数，然后定义一个新的Fetch函数，在新函数中添加拦截逻辑，最后将新的Fetch函数赋值给全局的fetch对象。

// 保存原生的fetch函数

const originalFetch = fetch;
// 创建一个新的fetch函数
const customFetch = async (input, init) => {
  // 在请求发送之前进行处理
  console.log('请求发送前处理逻辑');
  // 添加自定义请求头
  if (!init.headers) {
    init.headers = {};
  }
  init.headers['Custom-Header'] = 'CustomValue';
  // 调用原生的fetch函数
  const response = await originalFetch(input, init);
  // 在响应返回之后进行处理
  console.log('响应返回后处理逻辑');
  // 返回处理后的响应
  return response;
};
// 将新的fetch函数赋值给全局fetch对象
window.fetch = customFetch;

通过这种方式，我们可以在前端灵活地拦截和处理所有的Fetch请求。

一、SERVICE WORKER

Service Worker是一种运行在浏览器后台的脚本，允许你在网络请求的生命周期中拦截和处理请求。它通常用于创建离线体验、缓存资源和处理网络请求。使用Service Worker拦截请求的步骤如下：

1. 注册Service Worker

首先，需要在你的应用中注册Service Worker。确保你的应用在HTTPS环境下运行，因为Service Worker只能在安全上下文中使用。

if ('serviceWorker' in navigator) {

  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker 注册成功:', registration);
    })
    .catch(error => {
      console.log('Service Worker 注册失败:', error);
    });
}

2. 在Service Worker中拦截请求

在Service Worker脚本中，你可以使用fetch事件来拦截所有的网络请求，并对其进行处理。

self.addEventListener('fetch', event => {

  event.respondWith(
    (async () => {
      // 在请求发送前处理逻辑
      console.log('拦截请求:', event.request.url);
      // 发送请求
      const response = await fetch(event.request);
      // 在响应返回后处理逻辑
      console.log('处理响应:', response);
      return response;
    })()
  );
});

应用场景

Service Worker特别适用于需要对请求进行缓存或离线处理的场景。例如，你可以在请求图片资源时，首先检查缓存中是否有对应的资源，如果有则直接从缓存中返回，否则再发送请求。

二、XMLHTTPREQUEST

XMLHttpRequest（XHR）是另一种在前端拦截请求的方法，尤其适用于需要兼容老旧浏览器的场景。虽然Fetch API更现代化，但XHR仍然在许多项目中被广泛使用。以下是如何使用XHR拦截请求的步骤：

1. 重写XMLHttpRequest

类似于Fetch API的拦截，我们需要重写XMLHttpRequest对象的相关方法。通过重写open和send方法，可以在请求发送前和响应返回后进行处理。

// 保存原生的XMLHttpRequest

const OriginalXMLHttpRequest = XMLHttpRequest;
class CustomXMLHttpRequest extends OriginalXMLHttpRequest {
  open(method, url, async, user, password) {
    // 在请求发送前处理逻辑
    console.log('请求发送前处理逻辑:', method, url);
    super.open(method, url, async, user, password);
  }
  send(body) {
    // 在请求发送前处理逻辑
    console.log('请求发送前处理逻辑: 发送数据', body);
    super.send(body);
  }
  set onreadystatechange(callback) {
    const wrappedCallback = () => {
      // 在响应返回后处理逻辑
      if (this.readyState === 4) {
        console.log('响应返回后处理逻辑:', this.responseText);
      }
      callback.call(this);
    };
    super.onreadystatechange = wrappedCallback;
  }
}
// 将新的XMLHttpRequest赋值给全局对象
window.XMLHttpRequest = CustomXMLHttpRequest;

应用场景

XHR的拦截通常用于需要在请求发送前添加自定义头部信息或在响应返回后进行统一的错误处理。例如，你可以在每个请求头中添加一个身份验证令牌，并在响应返回时检查是否需要重新登录。

三、FETCH API

Fetch API是现代前端开发中最常用的请求方法，它提供了更简洁和灵活的方式来进行网络请求。以下是使用Fetch API拦截请求的详细步骤：

1. 保存原生的Fetch函数

首先，我们需要保存原生的Fetch函数，确保我们可以在新的Fetch函数中调用它。

const originalFetch = fetch;

2. 创建一个新的Fetch函数

在新的Fetch函数中，我们可以在请求发送前和响应返回后进行自定义处理。

const customFetch = async (input, init) => {

  // 在请求发送前处理逻辑
  console.log('请求发送前处理逻辑:', input, init);
  // 添加自定义请求头
  if (!init.headers) {
    init.headers = {};
  }
  init.headers['Custom-Header'] = 'CustomValue';
  // 调用原生的fetch函数
  const response = await originalFetch(input, init);
  // 在响应返回后处理逻辑
  console.log('响应返回后处理逻辑:', response);
  return response;
};

3. 将新的Fetch函数赋值给全局对象

最后，将新的Fetch函数赋值给全局的fetch对象。

window.fetch = customFetch;

应用场景

Fetch API的拦截适用于大多数现代Web应用，特别是需要在请求发送前添加全局请求头或在响应返回后进行统一错误处理的场景。例如，你可以在每个请求头中添加一个CSRF令牌，并在响应返回时检查是否需要刷新令牌。

四、使用MIDDLEWARE

在一些前端框架如React和Vue中，你可以使用中间件（Middleware）来拦截和处理请求。中间件是一种在请求发送和响应返回之间进行处理的机制，它可以帮助你在应用中实现更复杂的请求拦截逻辑。

1. 在Redux中使用中间件

如果你在使用Redux进行状态管理，可以通过Redux中间件来拦截和处理请求。

const apiMiddleware = store => next => action => {

  if (action.type === 'API_REQUEST') {
    // 在请求发送前处理逻辑
    console.log('API请求发送前处理逻辑:', action);
    // 发送请求
    fetch(action.payload.url, action.payload.options)
      .then(response => response.json())
      .then(data => {
        // 在响应返回后处理逻辑
        console.log('API响应返回后处理逻辑:', data);
        store.dispatch({ type: 'API_SUCCESS', payload: data });
      })
      .catch(error => {
        console.log('API响应错误:', error);
        store.dispatch({ type: 'API_FAILURE', payload: error });
      });
  } else {
    next(action);
  }
};
// 在Redux中应用中间件
const store = createStore(reducer, applyMiddleware(apiMiddleware));

2. 在Vue中使用插件

在Vue应用中，你可以使用Vue插件或Vuex中间件来实现请求拦截。

Vue.prototype.$http = (url, options) => {

  // 在请求发送前处理逻辑
  console.log('Vue请求发送前处理逻辑:', url, options);
  // 发送请求
  return fetch(url, options)
    .then(response => response.json())
    .then(data => {
      // 在响应返回后处理逻辑
      console.log('Vue响应返回后处理逻辑:', data);
      return data;
    })
    .catch(error => {
      console.log('Vue响应错误:', error);
      throw error;
    });
};

应用场景

使用中间件拦截请求适用于需要在整个应用中统一处理请求逻辑的场景。例如，你可以在中间件中添加全局的错误处理逻辑，确保所有API请求的错误都能够被捕获和处理。

五、安全与性能考虑

在拦截请求时，安全和性能是两个需要特别注意的方面。无论是通过Service Worker、XMLHttpRequest还是Fetch API进行拦截，都需要确保拦截逻辑不会引入安全漏洞或性能瓶颈。

1. 安全考虑

在处理请求时，确保不会泄露敏感信息。例如，在添加自定义请求头时，避免将敏感信息暴露在控制台日志中。此外，确保拦截逻辑不会影响到原有的身份验证和授权机制。

2. 性能考虑

拦截请求需要额外的处理时间，因此需要确保拦截逻辑尽可能高效。例如，避免在拦截逻辑中进行复杂的计算或阻塞操作。此外，可以通过缓存和异步处理来优化性能。

六、实战案例

为了更好地理解前端拦截请求的应用场景，以下是两个实战案例，展示如何在实际项目中使用拦截请求技术。

1. 用户身份验证

在一个需要用户身份验证的应用中，可以使用Fetch API拦截请求，确保每个请求都携带有效的身份验证令牌。

const customFetch = async (input, init) => {

  // 检查并添加身份验证令牌
  const token = localStorage.getItem('authToken');
  if (!init.headers) {
    init.headers = {};
  }
  init.headers['Authorization'] = `Bearer ${token}`;
  const response = await fetch(input, init);
  // 检查响应状态，处理身份验证错误
  if (response.status === 401) {
    alert('身份验证失败，请重新登录');
    window.location.href = '/login';
  }
  return response;
};
window.fetch = customFetch;

2. 全局错误处理

在一个需要统一错误处理的应用中，可以使用中间件来捕获并处理所有的API请求错误。

const apiMiddleware = store => next => action => {

  if (action.type === 'API_REQUEST') {
    fetch(action.payload.url, action.payload.options)
      .then(response => {
        if (!response.ok) {
          throw new Error('网络响应失败');
        }
        return response.json();
      })
      .then(data => {
        store.dispatch({ type: 'API_SUCCESS', payload: data });
      })
      .catch(error => {
        console.error('API请求错误:', error);
        store.dispatch({ type: 'API_FAILURE', payload: error.message });
      });
  } else {
    next(action);
  }
};
const store = createStore(reducer, applyMiddleware(apiMiddleware));

通过这两个实战案例，我们可以看到拦截请求技术在实际项目中的广泛应用。无论是处理用户身份验证还是统一错误处理，拦截请求都能够帮助我们实现更灵活和可控的网络请求逻辑。

七、总结

前端拦截请求是一项非常实用的技术，可以帮助开发者在请求发送前和响应返回后进行自定义处理。通过使用Service Worker、XMLHttpRequest、Fetch API和中间件等方法，我们可以实现多种多样的拦截逻辑，满足不同的应用需求。无论是验证用户身份、添加通用请求头还是处理错误响应，拦截请求都能够提高应用的安全性和可维护性。在实际项目中，合理使用拦截请求技术，可以显著提升开发效率和用户体验。

相关问答FAQs：

1. 前端如何拦截请求？
前端可以通过使用拦截器来拦截请求。拦截器可以在请求发送前或响应返回后对请求进行处理。通过拦截器，前端可以对请求头、请求参数、响应数据等进行修改或处理，实现对请求的拦截和控制。

2. 为什么前端需要拦截请求？
前端拦截请求可以用于多种用途。例如，前端可以拦截请求来添加身份验证信息，确保只有经过授权的用户才能访问某些接口。另外，前端还可以拦截请求来处理错误信息，统一处理请求的异常情况，提升用户体验。

3. 前端如何使用拦截器拦截请求？
前端框架通常都提供了拦截器的功能。例如，在Vue框架中，可以通过创建一个拦截器实例并在请求发送前或响应返回后进行处理。通过在拦截器中定义请求拦截函数和响应拦截函数，可以实现对请求的拦截和处理。拦截器可以在请求头中添加token信息，处理请求异常，或者对响应数据进行处理等。