请求拦截器和响应拦截器
1.新增一个http.js文件,配置axios响应拦截器和请求拦截器。然后再导入Loading组件。并设置startLoading和endLoading两个函数,作用就是如函数名所示了。
import axios from 'axios'
import { Message, Loading } from 'element-ui'
let loading
function startLoading() {
loading = Loading.service({
lock: true,
text: '为小主拼命加载中...',
background: 'rgba(0,0,0,7)'
})
}
function endLoading() {
loading.close()
}
// 请求拦截
axios.interceptors.request.use(config => {
startLoading()
return config
}, error => {
return Promise.reject(error)
})
// 响应拦截
axios.interceptors.response.use( response => {
endLoading()
return response
}, error => {
endLoading()
Message.error(error.response.data)
return Promise.reject(error)
})
export default axios
main.js中引入http.js并绑定在vue上
impo