如何在Axios全局/拦截器中实现每个请求后单独发送通知请求

完全不需要axios.all，Axios的响应拦截器就是专门用来处理这类“每个请求完成后执行统一逻辑”的场景，而且能轻松避免循环调用的问题。

核心思路 #

响应拦截器会在每个请求成功完成或失败后自动触发，我们只需要在拦截器里判断当前请求不是api/getNotification本身（防止无限循环），然后发起通知请求即可。

具体实现代码 #

1. 先创建Axios实例（或直接用全局Axios）

import axios from 'axios';

// 推荐创建独立的Axios实例，便于统一管理配置
const apiClient = axios.create({
  baseURL: '/api' // 假设你的接口前缀是/api
});

2. 添加响应拦截器

// 成功响应的拦截逻辑
apiClient.interceptors.response.use(
  (originalResponse) => {
    // 关键：排除getNotification请求，避免无限循环
    const currentRequestUrl = originalResponse.config.url;
    if (currentRequestUrl !== '/getNotification') {
      // 发起通知请求，这里的逻辑完全独立于原请求
      apiClient.get('/getNotification')
        .then(notificationRes => {
          // 这里可以处理通知数据，比如更新页面通知角标、弹出提示等
          console.log('收到最新通知:', notificationRes.data);
        })
        .catch(err => {
          console.error('获取通知失败:', err);
        });
    }
    // 一定要返回原请求的响应，不影响原请求的后续处理
    return originalResponse;
  },
  (error) => {
    // （可选）如果希望请求失败时也获取通知，添加下面的逻辑
    const failedRequestUrl = error.config?.url;
    if (failedRequestUrl !== '/getNotification') {
      apiClient.get('/getNotification')
        .then(notificationRes => {
          console.log('请求失败后获取的通知:', notificationRes.data);
        })
        .catch(err => {
          console.error('获取通知失败:', err);
        });
    }
    // 继续抛出错误，不影响原请求的错误处理流程
    return Promise.reject(error);
  }
);

关键细节说明 #

• 避免无限循环：必须判断当前请求的URL不是getNotification，否则每次获取通知的请求完成后，拦截器又会触发，陷入死循环。
• 独立处理通知请求：通知请求是异步发起的，不会阻塞原请求的响应流程，用户体验不受影响。
• 灵活调整触发条件：如果不需要所有请求后都获取通知，只需要修改判断逻辑即可，比如只在/getNews、/getUser等特定请求后触发：

  const allowedUrls = ['/getNews', '/getUser'];
  if (allowedUrls.includes(currentRequestUrl)) {
    // 发起通知请求
  }
  

• 全局Axios的情况：如果你直接用全局axios（比如axios.get('/api/getNews')），只需要把上面的apiClient换成axios即可。

内容的提问来源于stack exchange，提问作者mohammad zahedi