vue axios 封装

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

1. 在Vue项目中安装Axios：

npm install axios

2. 创建一个axios.js文件，用于封装Axios相关的配置和方法：

// axios.js

import axios from 'axios';

// 创建一个axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置基础URL
  timeout: 5000, // 设置请求超时时间
});

// 请求拦截器
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);
  }
);

// 封装get请求方法
export function get(url, params) {
  return instance.get(url, { params });
}

// 封装post请求方法
export function post(url, data) {
  return instance.post(url, data);
}

3. 在main.js中引入和使用封装好的axios：

// main.js

import Vue from 'vue';
import App from './App.vue';
import { get, post } from './axios';

Vue.prototype.$get = get;
Vue.prototype.$post = post;

new Vue({
  render: (h) => h(App),
}).$mount('#app');

4. 在Vue组件中使用封装好的axios：

<template>
  <div>
    <button @click="getData">发送请求</button>
  </div>
</template>

<script>
export default {
  methods: {
    async getData() {
      try {
        const res = await this.$get('/api/data', { id: 1 });
        console.log(res);
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

通过以上封装，可以在Vue组件中直接使用`this.$get()`和`this.$post()`方法发送GET和POST请求，并且可以享受到Axios的拦截器、错误处理等功能。你还可以根据实际需求进行进一步的封装和定制化。