vue2封装axios请求

在Vue 2项目中，可以通过封装axios来简化HTTP请求的过程。以下是一个简单的axios封装示例：

首先，安装axios：

// 安装axios
npm install axios

然后，创建一个用于封装axios的文件，例如http.js：

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 => {
    // 可以在这里添加请求头等信息
    return config;
  },
  error => {
    // 请求错误处理
    console.log(error); // for debug
    Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只返回data部分
    const res = response.data;
    // 根据返回的状态码做相应处理，例如401未授权等
    return res;
  },
  error => {
    // 响应错误处理
    console.log('err' + error); // for debug
    return Promise.reject(error);
  }
);
 
export default service;

最后，在组件中使用封装后的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);
      }
    }
  }
}

这样，就可以在多个组件中复用这个封装过的axios实例，并且可以很方便地添加请求头、拦截器等功能