vue axios二次封装

对于Vue项目中使用Axios进行网络请求，可以进行二次封装来简化操作和提供统一的错误处理。下面是一个简单的示例代码，展示了如何对Axios进行二次封装：

首先，在项目中创建一个名为`api.js`的文件，用于封装Axios：

import axios from 'axios';

const instance = axios.create({
  // 可以在这里配置一些默认的请求配置，如baseURL、超时时间等
});

// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在发送请求前做一些处理，比如添加 token 等
    return config;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据进行处理
    return response.data;
  },
  (error) => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

export default instance;

然后，在需要发送请求的组件中，引入`api.js`并使用二次封装后的Axios进行请求：

import api from './api.js';

// 发送 GET 请求
api.get('/api/user')
  .then((response) => {
    // 处理成功响应
    console.log(response);
  })
  .catch((error) => {
    // 处理错误响应
    console.log(error);
  });

// 发送 POST 请求
api.post('/api/user', { name: 'John' })
  .then((response) => {
    // 处理成功响应
    console.log(response);
  })
  .catch((error) => {
    // 处理错误响应
    console.log(error);
  });

通过这种方式进行二次封装，可以在每次请求中统一处理请求前和请求后的逻辑，以及统一处理错误响应。同时，也可以方便地对Axios的配置进行管理和修改。