Vue axios 的封装代码【详解】

axios需要进行一些什么配置

1. 设置请求的默认地址baseUrl
2. 设置请求超时时间
3. Post请求头的设置
4. 拦截器（请求拦截与响应拦截）
5. 封装post, get 请求 (此示例没有封装，可根据项目情况而定，因为封装后，对于一些特殊接口设置不是太灵活，需要我们项目没有选择封装，如果请求方法比较单一的，可以考虑封装)

axios完整封装代码

我们可以将上面的都封装成一个文件axios.js放在util文件夹中
代码如下：

import axios from ‘axios’
const ConfigBaseURL = ‘https://localhost:3000/’
// 使用create方法创建axios实例
const Service = axios.create({
baseURL: ConfigBaseURL, //1. 设置默认地址
timeout: 7000 // 2. 请求超时时间

})
//3. 给POST请求添加请求头设置（不同项目，值不一样）
Service.defaults.headers.post[‘Content-Type’] = ‘application/json;charset=UTF-8’;
//4.1 添加请求拦截器
Service.interceptors.request.use(config => {
loadingInstance = Loading.service({
lock: true,
text: ‘loading…’
})
return config
})
//4.2 添加响应拦截器
Service.interceptors.response.use(response => {
loadingInstance.close()
// console.log(response)
return response.data
}, error => {
console.log(‘TCL: error’, error)
const msg = error.Message !== undefined ? error.Message : ”
Message({
message: ‘网络错误’ + msg,
type: ‘error’,
duration: 3 * 1000
})
loadingInstance.close()
return Promise.reject(error)
})

引用封装的文件

main.js中引用，代码如下：

import axios from ‘./util/axios.js’
Vue.prototype.$axios = axios ;

引用后，直接使用 this.$axios.get 或 this.$axios.post 即可发起请求