当前位置：首页 > React

react里面如何做axios拦截

2026-01-26 05:56:56React

在React中使用Axios拦截器可以统一处理请求和响应，例如添加认证头、错误处理等。以下是具体实现方法：

创建Axios实例并设置拦截器

import axios from 'axios';

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

// 请求拦截器
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) {
      // 处理未授权情况
    }
    return Promise.reject(error);
  }
);

export default instance;

在组件中使用自定义实例

import React, { useEffect } from 'react';
import api from './axiosInstance'; // 导入自定义实例

function MyComponent() {
  useEffect(() => {
    api.get('/users')
      .then(data => console.log(data))
      .catch(error => console.error(error));
  }, []);

  return <div>Axios拦截器示例</div>;
}

全局错误处理

对于需要全局捕获的错误，可以在响应拦截器中统一处理：

instance.interceptors.response.use(
  response => response,
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 404:
          alert('请求资源不存在');
          break;
        case 500:
          alert('服务器错误');
          break;
        default:
          alert('未知错误');
      }
    }
    return Promise.reject(error);
  }
);

取消请求

在组件卸载时取消pending请求：

import { CancelToken } from 'axios';

useEffect(() => {
  const source = CancelToken.source();

  api.get('/users', {
    cancelToken: source.token
  });

  return () => {
    source.cancel('组件卸载取消请求');
  };
}, []);

以上方法实现了请求和响应的拦截处理，可根据实际需求调整拦截逻辑。注意拦截器执行顺序是后添加的先执行。

react里面如何做axios拦截