vue interceptor 使用教程实例详解

介绍

vue-interceptor 是 Vue.js 的 HTTP 拦截器插件，它可以在请求发送和响应返回时自定义拦截处理，从而允许我们进行统一的请求前、后处理。本文将详细讲解并演示 Vue interceptor 的使用教程。

安装

我们可以通过 NPM 或 Yarn 来下载安装 Vue interceptor：

npm install vue-interceptor --save
或
yarn add vue-interceptor

使用

首先在 main.js 里引入 vue-interceptor：

import Vue from 'vue'
import App from './App.vue'
import VueInterceptor from 'vue-interceptor'

Vue.config.productionTip = false

// 添加请求拦截器
Vue.use(VueInterceptor, {
  request: {
    // 请求拦截器配置
    onBefore: function (config) {
      // ...请求发出前——do something
      return config
    },
    onAfter: function (response) {
      // ...请求已经返回——do something
      return response
    }
  },
  response: {
    // 响应拦截器配置
    onBefore: function (response) {
      // ...在返回响应之前——do something
      return response
    },
    onAfter: function (response) {
      // ...响应已经被处理完——do something
      return response
    }
  }
})

new Vue({
  render: h => h(App),
}).$mount('#app')

示例 1 - 加载动画

下面是一个示例，当 API 请求发出后，页面会显示加载动画，当请求返回后，动画会自动消失。

Vue.use(VueInterceptor, {
  request: {
    onBefore: config => {
      this.$loading.show() // 显示加载动画
      return config
    },
    onAfter: response => {
      this.$loading.hide() // 隐藏加载动画
      return response
    }
  }
})

示例 2 - 错误处理

以下示例会展示如何处理某些特定的 HTTP 错误，例如当接收到401错误时，用户将被重定向到登录页面。

Vue.use(VueInterceptor, {
  response: {
    onBefore: response => {
      if (response.status === 401) {
        this.$router.push('/login') // 重定向到登录页面
      }
      return response
    }
  }
})

总结

以上是 Vue interceptor 的使用教程。通过 Vue interceptor 我们可以实现全局或局部拦截器，统一处理请求和响应，从而增强代码的复用性。