使用vue封装axios

在Vue中使用Axios进行数据请求，我们可以将Axios封装成Vue插件，方便全局使用。

首先，安装Axios：

npm install axios --save

然后在src目录下新建一个plugins目录，用于存放Vue插件。在plugins目录下新建一个axios.js文件，用于封装Axios：

import axios from 'axios'

const Axios = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 接口的基础路径
  timeout: 5000 // 请求超时时间
})

// 请求拦截器
Axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 响应拦截器
Axios.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error)
  }
)

export default {
  install: function (Vue) {
    Vue.prototype.$axios = Axios
  }
}

这里使用了Axios的create方法创建了一个Axios实例，并配置了请求拦截器和响应拦截器。在请求拦截器中，我们可以对请求进行一些处理，比如在请求头中添加token，设置请求超时时间等。在响应拦截器中，我们可以对响应数据进行一些处理，比如统一处理错误信息等。

最后，我们将Axios封装成Vue插件，在main.js中使用：

import axios from '@/plugins/axios'

Vue.use(axios)

这样就可以全局使用$axios方法进行数据请求了，例如：

this.$axios.get('/api/user').then(response => {
  console.log(response)
})