react axios封装

在React中使用Axios进行网络请求是很常见的操作。为了让代码更加简洁和易于维护，我们可以对Axios进行封装，以便在整个应用程序中重复使用。

以下是Axios的基本封装示例：

1. 创建一个Axios实例：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://example.com/api',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

2. 封装GET请求：

export const get = (url, params) => {
  return new Promise((resolve, reject) => {
    instance.get(url, {params})
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err);
      });
  });
};

3. 封装POST请求：

export const post = (url, data) => {
  return new Promise((resolve, reject) => {
    instance.post(url, data)
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err);
      });
  });
};

在上面的代码中，我们首先创建了一个Axios实例，并设置了一些默认配置，例如基本URL、超时时间和请求头。然后，我们封装了GET和POST请求，使用Promise对象进行异步操作，并通过resolve和reject函数返回数据或错误。

使用封装后的Axios进行网络请求非常简单，只需要调用get或post函数，并传入URL和参数即可，例如：

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

get('/users', {id: 1})
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.error(err);
  });

post('/users', {name: 'John', age: 30})
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.error(err);
  });

通过封装Axios，我们可以避免在应用程序中重复编写相同的代码，并使代码更加简洁和易于维护。