axios拦截器 - web前端 | MrNobody = MrNobody's Blog = 保持呼吸不要断气

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

应用场景：

通过 axios.interceptors.request .use( 成功的回调，失败的回调) 可以配置请求拦截器，其中失败的回调函数可以被省略！

	axios.interceptors.request.use((config)=>{
	// 一定要 return config 固定写法
	return config;

	},(error)=>{

	return Promise.reject(error);

	})

	// 1. 导入 axios
	import axios from "axios";

	// 2. 设置请求的根路径
	axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'

	// 配置请求拦截器
	axios.interceptors.request.use(config => {
	// 为当前请求配置 Token 认证字段
	config.headers.Authorzation = 'bear xxx'
	console.log(config)
	return config
	})

	// 3. 把包挂载到 vue 的原型对象上
	Vue.prototype.$http = axios

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

	// 1. 按需导入 Loading 效果组件
	import { Loading } from 'element-ui'

	// 2. 声明变量，用来存储 Loading 组件的实例对象

	let loadingInstance = null

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

通过 axios.interceptors.response .use( 成功的回调，失败的回调) 可以配置响应拦截器，失败的回调函数依旧可以被省略。

	axios.interceptors.response.use((response)=>{

	return response;

	},(error)=>{

	return Promise.reject(error);

	})

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

	// 配置响应拦截器
	axios.interceptors.response.use(response => {
	// 关闭 loading
	loadingInstance.close()
	return response
	})