axios攔截器中alert()彈出兩次(Vue.js)

Question

在我的 Vue 應用程序中，我實例化了 axios 的單個實例，並在整個應用程序中使用它來處理 HTTP 請求。 我已經設置了一個響應攔截器，它檢查來自后端的任何響應是否為401 unauthorized ，如果是，則顯示一條警告消息。 這個基本流程已經實現了，但是你需要在警告消息上點擊“確定”兩次才能讓它離開 go，我不確定為什么。

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 警報出現兩次

我試過從return Promise.reject(error);更改返回語句 return false; 但這對我沒有任何作用。

Answer 1

正如 Phil 在上面的評論中所建議的那樣，查看瀏覽器控制台中的“網絡”選項卡幫助我解決了這個問題。 控制台顯示頁面中的每個組件是如何加載的以及生成的響應代碼。 簡而言之，實際上有兩個進程返回401 ，這就是alert被調用兩次的原因。

我決定將調用alert的代碼從全局 axios 攔截器（每當任何進程返回401時調用）移動到一個特定 axios 進程內的.catch塊，以便它只被調用一次。

Answer 2

您的 promise 在 axios 錯誤攔截器中拋出錯誤，並且第二次調用錯誤。