react使用axios二次封装

在React中使用axios进行二次封装可以更方便地进行网络请求的管理和处理。下面是一个简单的示例：

首先，在你的项目中安装axios：

npm install axios

然后，创建一个名为`api.js`的文件，用于封装axios。在该文件中，你可以定义一些全局的请求配置和拦截器。

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://your-api-url.com', // 设置基础URL
  timeout: 5000, // 设置请求超时时间
});

api.interceptors.request.use(
  (config) => {
    // 在请求发送之前进行一些处理，例如添加token等
    return config;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

api.interceptors.response.use(
  (response) => {
    // 在接收到响应数据之前进行一些处理
    return response.data;
  },
  (error) => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

export default api;

现在，你可以在需要发送请求的组件中导入并使用封装好的api。

import React from 'react';
import api from './api';

class MyComponent extends React.Component {
  componentDidMount() {
    api.get('/users') // 发送GET请求到'/users'接口
      .then((response) => {
        // 处理响应数据
        console.log(response);
      })
      .catch((error) => {
        // 处理错误
        console.error(error);
      });
  }

  render() {
    return <div>...</div>;
  }
}

export default MyComponent;

这里只是一个简单的例子，你可以根据实际需要进行更复杂的封装，例如对请求错误进行统一处理、添加全局的请求头等。希望能帮到你！