在 Vue.js 组件中如何命名 Axios 拦截器以进行弹出？

Question

我正在使用 Vue CLI 为 Axios 加载实例属性。我添加了几个拦截器，我希望能够在 Vue 组件内部使用 Axios 实例时关闭它们。

在文档中 Axios 建议您只标记拦截器，然后 eject 稍后通过名称。

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

所以我遇到的问题是，我不知道我可以为谁命名我的拦截器以在组件中使用。

这是我的设置：

api-client.js

import axios from 'axios'

var client = axios.create({
  baseURL: process.env.API_DOMAIN,
  headers: { Accept: 'application/json' }
})

var unauthorizedInterceptor = client.interceptors.response.use(function (response) {
  return response
}, function (error) {

  ...

  return Promise.reject(error)
})

export default client

main.js

import Vue from 'vue'
import apiClient from './api-client'

Vue.prototype.$apiClient = apiClient

new Vue({
  el: '#app',
  ...
})

component.js

<template>
  ...
</template>

<script>
export default {
  data () {
    return {
      username: null,
      email: null,
      firstName: null,
      lastName: null
    }
  },
  methods: {
    updateAccount () {
      var self = this

      var data = {
        username: this.username,
        email: this.email,
        first_name: this.firstName,
        last_name: this.lastName
      }

      self.$apiClient`enter code here`.interceptors.request.eject(unauthorizedInterceptor) // Remove interceptor here.

      self.$apiClient.patch('/me')
      .then(function () {
        ...
      })
      .catch(function () {
        ...
      })
    }
  }
}
</script>

如何命名拦截器以在组件级别将其弹出？

Answer 1

从您的api-client.js 导出拦截器并将其导入您要弹出的位置。

api-client.js

export let unauthorizedInterceptor = ...
export default client

component.js

import { unauthorizedInterceptor } from "./api-client"

...
self.$http.interceptors.request.eject(unauthorizedInterceptor)

您可能还想导出拦截器函数本身，以便在需要时将其添加回来。

或者导出一个或两个可以为您执行此管理的函数。

api-client.js

let unauthorizedInterceptor

export function removeUnauthorizedInterceptor() {
    axios.interceptors.request.eject(unauthorizedInterceptor)
}

export function addUnauthorizedInterceptor(){
    unauthorizedInterceptor = axios.interceptors.response.use(...)
}

component.js

import { removeUnauthorizedInterceptor} from "./api-client"
removeUnauthorizedInterceptor()