react二次封装axios

在React项目中进行二次封装axios可以提高代码的复用性和可维护性。下面是一个简单的示例来说明如何进行react二次封装axios：

1. 首先，在你的项目文件中导入axios库。你可以使用以下命令安装axios库：

import axios from 'axios';

2. 创建一个封装了axios请求的文件，例如`Http.js`。在这个文件中，你可以定义一些全局的请求配置，例如设置请求头、设置请求超时时间等。同时，你还可以定义一些通用的请求方法，例如GET、POST等请求方法，并对这些方法进行二次封装。这样可以在其他地方直接使用封装后的方法进行请求。以下是一个示例：

import axios from 'axios';

const Http = axios.create({
  baseURL: 'http://api.example.com', // 设置基本的请求地址
  timeout: 5000, // 设置请求超时时间
  headers: {
    'Content-Type': 'application/json', // 设置请求头
  },
});

// 封装GET请求方法
export const get = (url, params) => {
  return Http.get(url, { params });
};

// 封装POST请求方法
export const post = (url, data) => {
  return Http.post(url, data);
};

export default Http;

3. 在实际使用中，你可以在需要发送请求的地方引入封装好的方法，并进行请求操作。以下是一个示例：

import Http from '@/axios';
import { call } from 'redux-saga/effects';

export function* asyncCheckLogin({payload}) {
  const res = yield call(Http.reqCheckLogin, payload.values);
  if(res && res.code === '0'){
    // 跳转到首页
    payload.history.replace('/');
  }else {
    message.warn("你错了");
  }
}

通过上述步骤，你可以在React项目中进行二次封装axios，提高代码的复用性和可维护性。你可以在封装的文件中设置全局的请求配置，并定义通用的请求方法，然后在其他地方引入并使用这些方法来发送请求。