使用ajaxStart时存在多个AJAX调用 如何让其仅监听指定调用

核心说明 #

ajaxStart 是 jQuery 提供的全局 AJAX 事件，原生不支持直接指定监听单一请求，但可以通过自定义标识的方式实现需求，避免多请求重复触发提示。

方案1：请求自定义配置过滤（更稳定，推荐） #

在需要触发提示的目标请求中加入自定义标识参数，全局事件通过判断标识决定是否显示提示，推荐用ajaxSend+ajaxComplete组合替代ajaxStart，可以直接拿到请求配置：

1. 发起目标请求时添加自定义参数

$.ajax({
  url: '/your/target/interface',
  method: 'POST',
  // 添加自定义标识，不会被发送到服务端
  needShowLoadingTip: true,
  data: {},
  success: function(res) {
    // 业务逻辑
  }
})

2. 全局监听逻辑

// 请求发送前判断标识
$(document).on('ajaxSend', function(event, xhr, requestSettings) {
  if (requestSettings.needShowLoadingTip) {
    // 执行你的提示展示逻辑
    $('#loading-toast').show()
  }
})

// 请求完成后隐藏提示
$(document).on('ajaxComplete', function(event, xhr, requestSettings) {
  if (requestSettings.needShowLoadingTip) {
    $('#loading-toast').hide()
  }
})

方案2：全局变量标记控制（适合固定业务场景） #

如果一定要使用ajaxStart，可以通过全局变量标记目标请求的运行状态：

// 定义全局标记
let isTargetAjaxRunning = false

// 发起目标请求前设置标记
isTargetAjaxRunning = true
$.ajax({
  url: '/your/target/interface',
  method: 'GET',
  complete: function() {
    // 请求结束后清除标记
    isTargetAjaxRunning = false
  }
})

// ajaxStart 中判断标记执行逻辑
$(document).on('ajaxStart', function() {
  if (isTargetAjaxRunning) {
    $('#loading-toast').show()
  }
})

$(document).on('ajaxStop', function() {
  if (!isTargetAjaxRunning) {
    $('#loading-toast').hide()
  }
})

注意事项 #

• 自定义的AJAX配置参数仅在前端jQuery请求链路中传递，不会被提交到服务端，不影响接口正常调用。
• 如果你使用axios、fetch等其他请求库，直接通过请求/响应拦截器做逻辑判断，实现起来比全局事件更简洁。

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