vue封装接口的公共部分

在Vue中封装接口的公共部分可以使用axios拦截器来实现。具体步骤如下：

1. 创建一个axios实例

import axios from 'axios'

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

2. 添加请求拦截器

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

在请求拦截器中，我们可以对请求进行一些处理，比如添加token、设置请求头等。

3. 添加响应拦截器

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

在响应拦截器中，我们可以对响应进行一些处理，比如统一处理错误、处理响应数据等。

4. 将封装好的axios实例作为插件引入到Vue中

const http = {}

http.install = function (Vue) {
  Vue.prototype.$http = service
}

export default http

5. 在main.js中引入并使用插件

import Vue from 'vue'
import App from './App.vue'
import http from './plugins/http'

Vue.use(http)

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

这样我们就可以在Vue组件中使用封装好的axios实例来发送请求了，如下所示：

this.$http.get('/api/user', { params: { id: 1 } }).then(res => {
  console.log(res)
})