最近项目中用vue全家桶实现,避免不了使用axios,axios不仅可以用来请求数据,沟通前后端的作用,还有以下的http请求拦截作用、http响应拦截作用。
/**
* http配置
*/
// 引入axios以及element ui中的loading和message组件
import axios from 'axios'
import { Loading, Message } from 'element-ui'
// 超时时间
axios.defaults.timeout = 5000
// http请求拦截器
var loadinginstace
axios.interceptors.request.use(config => {
// element ui Loading方法
loadinginstace = Loading.service({ fullscreen: true })
return config
}, error => {
loadinginstace.close()
Message.error({
message: '加载超时'
})
return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => {// 响应成功关闭loading
loadinginstace.close()
return data
}, error => {
loadinginstace.close()
Message.error({
message: '加载失败'
})
return Promise.reject(error)
})
export default axios
我们可以单独建立一个http的js文件处理axios,再到main.js中引入,这样便于维护。