axios拦截器

1.在vue3的项目中全局配置axios

import App from './App.vue'

import axios from 'axios'

const app=createApp(App)

axios.defaults.baseURL='https://www.escook.cn'
app.config.globalProperties.$http=axios


app.mount('#app')

2.在vue2的项目中全局配置axios

需要在main.js入口文件中，通过vue构造函数的prototype原型对象全局配置axios

import App from './App.vue'

import axios from 'axios'

axios.defaults.baseURL='https://www.escook.cn'
Vue.prototype.$http=axios

new Vue({
render:h=>h(App)
}).$mount('#app')

3.什么是拦截器

拦截器会在每次发起ajax请求和得到响应的时候自动被触发

4.配置请求拦截器

通过axios.interceptors.request.use(成功的回调，失败的回调)可以配置请求拦截器。示例代码如下：

axios.interceptors.request.use(function(config){
return config
},funtion(error){
return Promise.reject(error)
})

注意：失败的回调函数可以被省略！

4.1 请求拦截器-Token认证

import axios from 'axios'

axios.default.baseURL='http://www.escook.cn'

axios.interceptors.request.use(config=>{
config.headers.Authorization='Bearer xxx'
return config
})

Vue.prototype.$http=axios

4.2请求拦截器-展示Loading效果

借助于element ui提供的Loading效果组件（element.eleme.cn/#/zh-CN/com… 可以方便的实现Loading效果的展示：

import {Loading} from 'element-ui'

let loadingInstance=null

axios.interceptors.request.use(config=>{
loadingInstance=Loading.service({fullscreen:true})
return config
})

5.配置响应拦截器

通过axios.interceptors.response.use(成功的回调，失败的回调）可以配置响应拦截器。示例代码如下：

axios.interceptors.response.use(function(response){
return respone
},function(error){
return Promise.reject(error)
})

注意：失败的回调函数可以被省略！

5.1 响应拦截器-关闭Loading效果

调用Loading示例提供的close（）方法即可关闭Loading效果，示例代码如下：

axios.interceptors.response.use(responsse=>{
loadingInstance.close()
return response
})