axios请求的二次封装

axios是一个基于Promise的HTTP客户端，可以用于发送HTTP请求。二次封装axios可以方便地在项目中统一处理请求的错误、loading状态等，提高代码的复用性。以下是一个简单的axios请求的二次封装示例：

import axios from 'axios';

// 创建一个axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置接口的基础url
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在请求发送之前做一些处理，例如添加token到请求头部
    // config.headers['Authorization'] = getToken();
    return config;
  },
  error => {
    // 错误处理
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做一些处理，例如解析返回的数据
    // const res = response.data;
    return response.data;
  },
  error => {
    // 错误处理
    return Promise.reject(error);
  }
);

export default instance;

在上述代码中，我们首先使用`axios.create`创建了一个axios实例，并配置了一些默认的请求参数，如`baseURL`和`timeout`。然后我们通过`instance.interceptors.request.use`和`instance.interceptors.response.use`来添加请求拦截器和响应拦截器。

请求拦截器可以在发送请求之前对请求进行一些处理，例如添加token到请求头部。响应拦截器可以对返回的数据进行一些处理，例如解析返回的数据。在拦截器中，我们可以根据具体的业务需求来进行拦截和处理。

最后，我们将封装好的axios实例导出，供其他地方使用。其他地方只需引入该实例，即可发送请求并统一处理错误、loading等逻辑。例如：

import request from './request';

// 发送GET请求
request.get('/api/getData', { params: { id: 1 } }).then(res => {
  // 处理返回的数据
}).catch(error => {
  // 处理错误
});

// 发送POST请求
request.post('/api/saveData', { data: { name: 'John' } }).then(res => {
  // 处理返回的数据
}).catch(error => {
  // 处理错误
});

通过这种二次封装的方式，我们可以在项目中更方便地使用axios发送请求，并统一处理错误和loading状态，提高代码的复用性和可维护性。