How to setup Axios interceptors with React Context properly?

在React应用中使用Axios拦截器，并且将其与React Context相结合，是一种有效管理API请求和响应的方法，尤其是涉及到全局状态管理（如身份验证状态）时。我将分步介绍如何正确设置这一结构。

第一步：创建Axios实例

首先，我们需要创建一个Axios实例，这可以帮助我们定义一些默认的配置，如基础URL和其他通用设置。

javascript
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json'
  }
});

第二步：设置Axios拦截器

在Axios实例上，我们可以设置请求拦截器和响应拦截器。请求拦截器可以用来在请求发送之前修改请求，例如添加认证token。响应拦截器可以用来全局处理响应或错误。

javascript
axiosInstance.interceptors.request.use(
  config => {
    const token = sessionStorage.getItem('authToken');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

axiosInstance.interceptors.response.use(
  response => response,
  error => {
    // 处理错误，例如如果token过期可以重定向到登录页面
    if (error.response.status === 401) {
      // handle token expiration (e.g., redirect to login)
    }
    return Promise.reject(error);
  }
);

第三步：创建React Context

接下来，我们需要创建一个React Context，以便在应用的不同部分中访问Axios实例。

javascript
import React, { createContext } from 'react';

export const AxiosContext = createContext({ axiosInstance });

export const AxiosProvider = ({ children }) => {
  return (
    <AxiosContext.Provider value={{ axiosInstance }}>
      {children}
    </AxiosContext.Provider>
  );
};

第四步：在React组件中使用Axios Context

现在，我们可以在任何React组件中使用这个Axios Context来发送请求。

javascript
import React, { useContext } from 'react';
import { AxiosContext } from './AxiosContext';

const MyComponent = () => {
  const { axiosInstance } = useContext(AxiosContext);

  const fetchData = async () => {
    try {
      const response = await axiosInstance.get('/data');
      console.log(response.data);
    } catch (error) {
      console.error('Error fetching data', error);
    }
  };

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
    </div>
  );
}

export default MyComponent;

结论

通过这种方式，我们不仅设置了Axios拦截器来处理请求和响应，并且利用React Context使得Axios实例可以在整个应用中访问，这对于涉及到需要全局状态（如身份验证状态）的请求和响应处理尤为重要。这种结构使得代码更加模块化和可维护。