一文全面了解:react-antd-admin 如何封装 axios

在React中封装Axios并添加请求拦截、响应拦截和错误处理是一个常见的需求,可以通过创建一个包装的Axios实例来实现。以下是一个简单的示例,展示如何在React中封装Axios:

首先,确保你已经安装了Axios,如果没有安装,可以使用以下命令进行安装:

npm install axios

然后,你可以创建一个独立的Axios实例,并在该实例上添加请求拦截器、响应拦截器以及错误处理。下面是一个示例:

import axios from 'axios';

// 创建一个独立的Axios实例
const instance = axios.create({
  baseURL: '/api', // 你的API基本URL
  timeout: 5000, // 请求超时时间(毫秒)
});

// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在请求发送前可以在这里进行一些处理,例如添加请求头
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 在这里对响应数据进行处理,然后将数据返回
    return response.data;
  },
  (error)

你可能感兴趣的:(从零到一开始实现后台管理系统,react.js,前端,前端框架)