对于react实现axios二次封装

在React中使用axios进行网络请求时，可以通过二次封装来简化代码，增加代码的可读性和可维护性。下面是实现axios二次封装的步骤：

1.创建一个api.js文件，用于定义所有的接口请求。

2.在api.js文件中，引入axios和需要请求的接口地址。

3.定义一个request函数，用于处理请求参数和返回结果。在request函数中，可以设置请求头、请求超时时间、请求方法等。

4.定义一个get和post函数，分别用于处理get和post请求。在get和post函数中，调用request函数，并将请求参数传递给request函数。

5.在React组件中，引入api.js文件，并调用get和post函数发送请求。

具体代码如下：

api.js文件：

import axios from 'axios';

// 定义接口地址
const BASE_URL = 'http://api.example.com';

// 定义请求函数
const request = (url, method, params = {}, config = {}) => {
  const headers = {
    'Content-Type': 'application/json',
    ...config.headers
  };
  const timeout = config.timeout || 30000;

  return axios({
    method,
    url: BASE_URL + url,
    params: method === 'GET' ? params : {},
    data: method === 'POST' ? params : {},
    headers,
    timeout
  }).then(response => {
    const { data } = response;

    return Promise.resolve(data);
  }).catch(error => {
    const { response } = error;

    if (response) {
      const { data } = response;

      return Promise.reject(data);
    }

    return Promise.reject(error);
  });
};

// 定义get请求函数
export const get = (url, params, config = {}) => {
  return request(url, 'GET', params, config);
};

// 定义post请求函数
export const post = (url, params, config = {}) => {
  return request(url, 'POST', params, config);
};

React组件中使用：

import { get, post } from './api';

class Example extends React.Component {
  componentDidMount() {
    // 发送get请求
    get('/example', { id: 1 }).then(data => {
      console.log(data);
    }).catch(error => {
      console.error(error);
    });

    // 发送post请求
    post('/example', { name: 'example' }).then(data => {
      console.log(data);
    }).catch(error => {
      console.error(error);
    });
  }

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