javascript - 在 Vue 项目中使 axios 全局化不起作用

Question

直到现在，我一直在每个我想发出 HTTP 请求的 Vue 组件中导入 axios，就像这样。

<script lang="ts">
import axios from 'axios';

@Component
export default class ExamplePage extends Vue {
  created(): void {
    axios.post(some_path);
  }
}

但是，现在我想为所有 axios 请求定义一个全局拦截器，基本上是为了捕获来自后端服务器 (Rails) 的所有 401 unauthorized 响应并注销用户。到目前为止，我的理解是您必须实例化 axios 一次并在所有地方使用它，而不是在每个文件中导入和使用不同的实例。

我提到了 this和 this ，并尝试了以下方法。

// application.js

import '../assets/sass/base.sass';
import App from '../app';
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import router from '../routes';

Vue.use(VueRouter);

document.addEventListener('DOMContentLoaded', () => {
  new Vue({
    el: '#application',
    router,
    render: (h) => h(App),
  });
});

axios.interceptors.response.use(
  response => response,
  error => {
    const status = error.response;
    if(status === 401) {
      // do stuff
    }
  }
);

Vue.prototype.$http = axios

当我尝试在另一个文件中调用 this.$http.put(...) 时，它说属性 $http 不存在(我猜测是因为该组件上下文中的 this 是组件本身，但我不确定)。我该如何解决这个问题？

[更新] 多亏了回复，我决定在一个单独的文件中初始化一个 axios 实例，然后改用它。但是，这仍然不起作用。 401 响应似乎根本不会触发拦截器。

是否需要一些额外的配置？

// axios-instance.ts
import axios, { AxiosInstance } from 'axios';

const axiosInstance: AxiosInstance = axios.create();

axiosInstance.interceptors.response.use(
  response => response.data,
  async function(error) {
    console.log("THIS IS THE 401 INTERCEPTOR")
    const status = error.response;
    if(status === 401) {
      // Log out user
    }
  }
);

export default axiosInstance;

// Some component
<script lang="ts">
import axiosInstance from 'axios-instance';

@Component
export default class ExamplePage extends Vue {
  created(): void {
    axiosInstance.post(some_path);
  }
}

Answer 1

没有直接解决你的问题，但我创建 axios 实例的方式是:

// axios-instance.js

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

export default instance

导入实例后

// application.js

import axios from '../../axios-instance'