1、在 vue3 的项目中全局配置 axios
2、在 vue2 的项目中全局配置 axios
-
需要在 main.js 入口文件中，通过 Vue 构造函数的 prototype 原型对象全局配置 axios：
3、什么是拦截器
-
拦截器（英文：Interceptors）会在每次发起 ajax 请求和得到响应的时候自动被触发。
4、配置请求拦截器
-
通过 axios.interceptors.request.use(成功的回调, 失败的回调) 可以配置请求拦截器。示例代码如下：
注意：失败的回调函数可以被省略！
4.1 请求拦截器 – Token 认证
4.2 请求拦截器 – 展示 Loading 效果
-
借助于 element ui 提供的 Loading 效果组件可以方便的实现 Loading 效果的展示：
5、配置响应拦截器
-
通过 axios.interceptors.response.use(成功的回调, 失败的回调) 可以配置响应拦截器。示例代码如下：
5.1 响应拦截器 – 关闭 Loading 效果
-
调用 Loading 实例提供的 close() 方法即可关闭 Loading 效果，示例代码如下：
6、proxy 跨域代理
6.1 通过代理解决接口的跨域问题
-
通过 vue-cli 创建的项目在遇到接口跨域问题时，可以通过代理的方式来解决：
① 把 axios 的请求根路径设置为vue 项目的运行地址（接口请求不再跨域）
② vue 项目发现请求的接口不存在，把请求转交给proxy 代理
③ 代理把请求根路径替换为 devServer.proxy 属性的值，发起真正的数据请求
④ 代理把请求到的数据，转发给axios
6.2 在项目中配置 proxy 代理
-
步骤1，在 main.js 入口文件中，把 axios 的请求根路径改造为当前 web 项目的根路径：
-
步骤2，在项目根目录下创建 vue.config.js 的配置文件，并声明如下的配置：
-
注意：
① devServer.proxy 提供的代理功能，仅在开发调试阶段生效
② 项目上线发布时，依旧需要 API 接口服务器开启 CORS 跨域资源共享
