vue2---axios 拦截器

axios 拦截器

前言

这篇文章介绍vue2中 axios 拦截器！
拦截器（英文：Interceptors）会在每次发起 ajax 请求和得到响应的时候自动被触发。
看完不会你打我。哈哈哈，开玩笑的，不多说，上刺刀！！

1. 回顾：在 vue3 的项目中全局配置 axios

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

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

3. 什么是拦截器

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

应用场景：

① Token 身份认证

② Loading 效果

③ etc…

4. 配置请求拦截器

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

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

4.1 请求拦截器 – Token 认证

4.2 请求拦截器 –实现 Loading 效果

1.借助于 element ui 提供的 Loading 效果组件（https://element.eleme.cn/#/zh-CN/component/loading）可以方便的实现 Loading 效果的展示。
2.配置响应拦截器，通过 axios.interceptors.response.use(成功的回调, 失败的回调) 可以配置响应拦截器。

3.响应拦截器 – 关闭 Loading 效果，调用 Loading 实例提供的 close() 方法即可关闭 Loading 效果。

示例代码如下：

// main.js 中代码

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
// 导入并注册 element-ui 组件
import './element-ui'
// 导入 Loading 效果组件
import { Loading } from 'element-ui'

import axios from 'axios'
// 配置请求根路径
// axios.defaults.baseURL = 'https://www.escook.cn'
axios.defaults.baseURL = 'http://localhost:8080'
// 配置请求拦截器
let loadingInstance = null
axios.interceptors.request.use(config => {
  // 展示 loading 效果
  loadingInstance = Loading.service({ fullscreen: true })
  // 配置 Token 认证
  config.headers.Authorization = 'Bearer xxx'
  console.log(config)
  // 这是固定写法
  return config
})
// 配置响应拦截器
axios.interceptors.response.use(response => {
  // 关闭 loading 效果
  loadingInstance.close()
  return response
})
Vue.prototype.$http = axios

const app = new Vue({
  render: h => h(App),
  // router: router
  router,
})

app.$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

写在最后

✨个人笔记博客✨

星月前端博客
http://blog.yhxweb.top/

✨原创不易，还希望各位大佬支持一下

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️评论，你的意见是我进步的财富！