axios 拦截器

前言

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 效果

示例代码如下：

// 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')

<!-- app.vue中代码 -->
<template>
  <div>
    <h1>App 根组件</h1>
    <el-button type="primary" @click="getInfo">主要按钮</el-button>
    <el-button type="success" @click="getUsers">成功按钮</el-button>

    <hr />

    <!-- 路由的占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'MyApp',
  methods: {
    // 测试 GET 请求
    async getInfo() {
      const { data: res } = await this.$http.get('/api/get', { params: { name: 'zs', age: 20 } })
      console.log(res)
    },
    // 获取用户列表的数据
    async getUsers() {
      const { data: res } = await this.$http.get('/api/users')
      console.log(res)
    },
  },
}
</script>