vue中封装axios

在Vue中封装Axios可以让我们在项目中更方便地使用API请求，以下是一个简单的封装过程：

1. 安装 Axios

npm install axios --save

2. 创建 axios.js 文件

在 src 文件夹下创建一个 axios.js 文件，然后在里面写入以下代码：

import axios from 'axios'

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

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

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

export default service

3. 在 main.js 中引入 axios.js

import Vue from 'vue'
import App from './App.vue'
import axios from './axios'

Vue.prototype.$http = axios

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

现在，我们就可以在 Vue 组件中使用 this.$http.get(url) 或 this.$http.post(url, data) 发送请求了。