vue2.0中axios拦截详细说明

最近项目中用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中引入，这样便于维护。