失眠网 > 全局配置axios axios 拦截器和 proxy 跨域代理

全局配置axios axios 拦截器和 proxy 跨域代理

时间：2022-12-17 06:38:05

一、全局配置axios

1. 为什么要全局配置 axios

2. 如何全局配置 axios

3. 在 vue3 的项目中全局配置axios

4. 在 vue2 的项目中全局配置 axios

二、axios 拦截器

1. 什么是拦截器

2. 配置请求拦截器

2.1 请求拦截器 – Token 认证

2.2 请求拦截器 – 展示 Loading 效果

3. 配置响应拦截器

3.1 响应拦截器 – 关闭 Loading 效果

展示Loading效果实战示例：

三、proxy 跨域代理

1. 接口的跨域问题

2. 通过代理解决接口的跨域问题

3. 在项目中配置 proxy 代理

步骤1，在main.js 入口文件中，把 axios 的请求根路径改造为当前web 项目的根路径：编辑

步骤2，在项目根目录下创建vue.config.js 的配置文件，并声明如下的配置：编辑

一、全局配置axios

1.为什么要全局配置axios

在实际项目开发中，几乎每个组件中都会用到 axios 发起数据请求。此时会遇到如下两个问题：

① 每个组件中都需要导入 axios（代码臃肿）

② 每次发请求都需要填写完整的请求路径（不利于后期的维护）

2.如何全局配置axios

在 main.js 入口文件中，通过 app.config.globalProperties 全局挂载 axios，示例代码如下：

3.在vue3的项目中全局配置axios

4.在vue2的项目中全局配置axios

需要在main.js 入口文件中，通过Vue 构造函数的prototype 原型对象全局配置 axios：

二、axios 拦截器

1.什么是拦截器

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

应用场景：

① Token 身份认证

② Loading 效果

③ etc…

2.配置请求拦截器

通过 axios.interceptors.request.use(成功的回调, 失败的回调) 可以配置请求拦截器。示例代码如下：

注意：失败的回调函数可以被省略！

2.1请求拦截器–Token认证

2.2请求拦截器–展示Loading效果

借助于element ui 提供的 Loading 效果组件

（/#/zh-CN/component/loading）可以方便的实现 Loading 效果的展示：

3.配置响应拦截器

通过 axios.interceptors.response.use(成功的回调, 失败的回调) 可以配置响应拦截器。示例代码如下：

注意：失败的回调函数可以被省略！

3.1响应拦截器–关闭Loading效果

调用 Loading 实例提供的close() 方法即可关闭 Loading 效果，示例代码如下：

展示Loading效果实战示例：

// 配置请求拦截器let loadingInstance = nullaxios.interceptors.request.use((config) => {// 展示Loading界面loadingInstance = Loading.service({ fullscreen: true })return config})// 响应拦截器axios.interceptors.response.use((response) => {loadingInstance.close()return response})