axios 拦截器_axios全局拦截器

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 跨域资源共享