设置请求拦截器与响应拦截器
拦截器的添加
请求拦截器
instance.interceptors.request.use(config => {
// 发起请求前做些什么
Toast.loading({
mask: false,
duration: 0, // 一直存在
forbidClick: true, // 禁止点击
message: '加载中...'
})
return config
}, () => {
// 请求错误
Toast.clear()
Toast('请求错误，请求稍后重试')
})
响应拦截器
instance.interceptors.response.use(res => {
// 请求成功
Toast.clear()
return res.data
}, () => {
Toast.clear()
Toast('请求错误，请求稍后重试')
})
导出src/service/http.js文件，用于其他地方的引入。
export default Http
第三步：在入口文件中导入 http.js ，并挂载到 vue 原型上。
import Http from './service/http'
// 把Http挂载到Vue实例上
Vue.prototype.$Http = Http
第四步：在组件中使用封装的请求
// 获取联系人列表
async getList(){
let res = await this.$Http.getContactList()
this.list = res.data
},
注意：在使用的时候，我们需要结合 async 与 await 才能正确使用。具体的使用方法是：
1.在定义的网络请求函数前增加 async 标识。
2.在接收请求返回数据的时候，增加 await 标识。
3.提示：在上面函数中，只有在 res 拿到后才会执行 this.list = res.data; 相当于在对应的 then 中执行的语句，避免了回调地狱。
4.axios在提交表单请求时会自动设置content-type，此时手动设置时无效的。
