vue中axios的二次封装——vue 封装axios详细步骤

在Vue中，可以通过创建一个axios实例并配置默认行为，然后再导出这个实例，以便在其他组件中使用。以下是一个简单的二次封装示例：

1. 创建一个http.js文件用于封装axios。

import axios from 'axios';
 
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头等信息
    // 例如：config.headers['Authorization'] = 'your token';
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只返回data部分
    const res = response.data;
    // 根据返回的状态码做相应处理，例如401未授权等
    return res;
  },
  error => {
    // 响应错误处理
    return Promise.reject(error);
  }
);
 
export default service;

2. 在其他组件中使用封装后的axios实例发送请求。

import http from '@/path/to/http.js';
 
export default {
  data() {
    return {
      // ...
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await http.get('/some-endpoint');
        // 处理响应数据
        console.log(response);
      } catch (error) {
        // 处理错误
        console.error(error);
      }
    }
  }
}

这样，你就可以在Vue项目中方便地使用二次封装后的axios实例了。