react 实现拦截器

实现拦截器的基本思路

在React中实现拦截器通常用于在请求发送前或响应返回后统一处理逻辑，例如添加请求头、处理错误等。可以通过封装Axios或Fetch API来实现。

使用Axios实现拦截器

Axios本身支持请求和响应拦截器，以下是具体实现方式：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    if (error.response.status === 401) {
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

export default instance;

使用Fetch API实现拦截器

Fetch API没有内置拦截器，但可以通过封装实现类似功能：

const fetchWithInterceptors = async (url, options = {}) => {
  // 请求拦截逻辑
  const token = localStorage.getItem('token');
  if (token) {
    options.headers = {
      ...options.headers,
      Authorization: `Bearer ${token}`,
    };
  }

  try {
    const response = await fetch(url, options);
    if (!response.ok) {
      throw new Error(response.statusText);
    }
    const data = await response.json();
    // 响应拦截逻辑
    return data;
  } catch (error) {
    if (error.message === 'Unauthorized') {
      window.location.href = '/login';
    }
    throw error;
  }
};

export default fetchWithInterceptors;

拦截器的常见用途

添加认证信息：自动在请求头中添加Token或其他认证信息。

错误统一处理：拦截401或403错误，跳转到登录页面。

请求/响应数据转换：统一处理请求参数或响应数据格式。

加载状态管理：在拦截器中显示或隐藏全局加载状态。

拦截器的注意事项

避免在拦截器中执行耗时操作，以免影响请求性能。

确保拦截器的逻辑是幂等的，避免重复执行导致问题。

在响应拦截器中正确处理错误，避免吞没错误信息。