axios拦截器

2022-11-11 18:48:37 浏览数 (1)

拦截器(Interceptors)会在每次发起ajaj请求和得到响应的时候自动被触发。

应用场景:

  • Token身份认证
  • Loading效果
  • etc...

请求拦截器

通过axios.interceptors.request.use(成功的回调,失败的回调)可以配置请求拦截器。

代码语言:javascript复制
axios.interceptors.request.use(function(config){
    return config;
},function(error){
    return Promise.reject(error);
})

注:失败的回调函数可以被省略。

请求拦截器-Token认证

代码语言:javascript复制
import axios from 'axios'

axios.default.baseURL='http://www.api.com'
//配置请求的拦截器
axios.interceptors.request.use(config=>{
    //为当前请求配置Token认证字段
    config.headers.Authorization = 'Bearer xxx'
    return config
})

vue.prototype.$http = axios

请求拦截器-展示Loading效果

可以借助element-ui提供的loading效果组件方便的实现loading效果的展示:

代码语言:javascript复制
//1,按需导入Loading效果组件
import {loading} from 'element-ui'

//2.声明变量,用来存储loading组件的实例对象
let loadingInstance = null

//配置请求拦截器
axios.interceptors.request.use(config => {
    //3.调用Loading组件的service()方法,创建loading组件的实例,并全屏展示效果
    loadingInstance = Loading.service({fullscreen:true})
    return config
})

响应拦截器

通过axios.interceptors.response.use(成功的回调,失败的回调)可以配置相应拦截器。

代码语言:javascript复制
axios.interceptors.response.use(function(response){
    return response;
},function(error){
    return Promise.reject(error)
})

注:失败的回调函数可以被省略。

相应拦截器-关闭Loading效果

调用Loading实例提供的close()方法即可关闭Loading效果。

代码语言:javascript复制
axios.interceptors.response.use(response => {
    loadingInstance.close()
    return response
})

0 人点赞