vue2项目中axios的封装

在Vue2项目中，我们通常会使用axios来进行网络请求。为了方便管理和使用，我们可以对axios进行封装。下面是一个简单的axios封装示例：

1. 创建一个api.js文件，用于存放封装后的axios请求。

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: 'http://localhost:8080', // api的base_url
  timeout: 5000 // 请求超时时间
});

// request拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送之前做一些处理
    return config;
  },
  error => {
    // 处理请求错误
    console.log(error);
    Promise.reject(error);
  }
);

// respone拦截器
service.interceptors.response.use(
  response => {
    // 数据响应之后进行一些处理
    return response.data;
  },
  error => {
    // 处理响应错误
    console.log('err' + error);
    return Promise.reject(error);
  }
);

export default service;

2. 在需要使用网络请求的组件中进行引用。

import api from "@/api.js";

export default {
  data() {
    return {
      userList: []
    };
  },
  mounted() {
    this.getUserList();
  },
  methods: {
    getUserList() {
      api.get('/user/list').then(res => {
        this.userList = res;
      });
    }
  }
};

这样，我们就可以在组件中直接使用封装后的axios进行网络请求了。