vue axios 封装

Vue中使用axios进行网络请求的封装可以提高代码的复用性和维护性，以下是一个简单的示例：

首先，安装axios和vue-axios库：

npm install axios vue-axios

接下来，在main.js中引入并注册这两个库：

import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios);

然后，创建一个api.js文件用于封装axios的请求方法：

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://api.example.com', // 设置请求的基础URL
  timeout: 5000, // 设置请求超时时间
});

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

// 响应拦截器
api.interceptors.response.use(
  response => {
    // 可以在接收到响应数据后做一些处理，例如统一处理错误码等
    return response.data;
  },
  error => {
    // 响应错误处理
    return Promise.reject(error);
  }
);

export default {
  // 封装GET请求
  get(url, params) {
    return api.get(url, { params });
  },

  // 封装POST请求
  post(url, data) {
    return api.post(url, data);
  },

  // 封装PUT请求
  put(url, data) {
    return api.put(url, data);
  },

  // 封装DELETE请求
  delete(url) {
    return api.delete(url);
  },
};

现在，你可以在Vue组件中使用封装好的api.js文件进行网络请求了：

import api from './api.js';

export default {
  mounted() {
    this.getData();
  },

  methods: {
    async getData() {
      try {
        const res = await api.get('/data');
        console.log(res);
      } catch (error) {
        console.error(error);
      }
    },
  },
};

以上就是一个简单的Vue axios封装示例，你可以根据实际需求对其进行扩展和优化。