Axios – 拦截器应用和基本使用

简介

拦截器（英文：Interceptors）会在每次发起 ajax 请求和得到响应的时候自动被触发。

应用场境

拦截器分请求拦截器和响应拦截器，请求时会先通过请求拦截器处理一系列数据操作，当服务器响应数据时，会先通过响应拦截器处理一系列操作，再回到控制组件上，这样的特性，最适合用在请求时弹出 Loading 加载中的界面，或 Token 身份认证等操作，加载中动画启动等操作。

基本使用

请求拦截器

拦截器在导入 axios 后进行配置(Vue 2)

import axios from "axios";

axios.interceptors.request.use()
axios.interceptors.response.use()

Vue.prototype.$http = axios

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

响应拦截器

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

利用拦截器展示 Loading 效果

借助于element ui 提供的 Loading 效果组件（https://element.eleme.cn/#/zh-CN/component/loading）  可以方便的实现 Loading 效果的展示

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