Alert() 在 axios 拦截器（Vue.js）中弹出两次

Question

在我的 Vue 应用程序中，我实例化了一个 axios 实例，并在整个应用程序中使用它来处理 HTTP 请求。我已经设置了一个响应拦截器，它检查来自后端的任何响应是否为401 unauthorized，如果是，则显示一条警报消息。这个基本流程已经实现，但是您需要在警报消息上点击两次“确定”才能让它消失，我不知道为什么。

Axios 实例：

import axios, { AxiosError, AxiosInstance, AxiosResponse } from 'axios';

const axiosInstance: AxiosInstance = axios.create();

axiosInstance.interceptors.response.use(
  (response: AxiosResponse) => response,
  (error: AxiosError) => {
    if(error.response && error.response.status === 401) {
      alert('There has been an issue. Please log out and then log in again.');
      return Promise.reject(error);
    }
  }
);

export default axiosInstance;

响应被拦截的请求：

import axiosInstance from 'axios-instance';

  public async getloggedInUserId() {
    await axiosInstance.get('/sessions.json')
      .then((response) => {
        if(response.data.user_id) {
          this.SET_USER_ID(response.data.user_id);
        }
      });
  }

我已阅读此主题，但我的问题似乎有所不同：Javascript alert shows up twice

我尝试将 return 语句从 return Promise.reject(error); 更改为 return false;，但这对我没有任何帮助。

Answer 1

正如 Phil 在上面的评论中所建议的那样，查看浏览器控制台中的 Network 选项卡帮助我解决了这个问题。控制台显示了页面中的每个组件是如何与生成的响应代码一起加载的。简而言之，两个进程实际上返回了401，这就是alert 被调用两次的原因。

我决定将调用 alert 的代码从全局 axios 拦截器（每当任何进程返回 401 时调用）移动到一个特定 axios 进程内的 .catch 块，以便它只被调用一次。

Answer 2

你的 promise 在 axios 错误拦截器中抛出错误，并且错误被第二次调用。