如何在JavaScript中阻止匹配特定端点的HTTP请求完成？

当然可以做到！针对你提到的场景——在用户点击页面其他元素时拦截特定端点（比如包含https://example.com）的HTTP请求，我们可以通过重写原生请求方法或者利用jQuery的全局钩子来实现，下面分两种方案详细说明：

原生JavaScript 实现方案 #

1. 拦截 XMLHttpRequest 请求 #

很多传统项目会用XMLHttpRequest发起请求，我们可以重写它的核心方法，记录待处理的目标请求，在用户点击时中断：

// 存储需要拦截的请求实例
const pendingRequests = new Map();

// 重写 XMLHttpRequest 的 open 方法，标记目标请求
const originalOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
  if (url.includes('https://example.com')) {
    this.targetUrl = url;
  }
  return originalOpen.apply(this, arguments);
};

// 重写 send 方法，记录请求实例并监听完成事件
const originalSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {
  if (this.targetUrl) {
    pendingRequests.set(this, this.targetUrl);
    this.addEventListener('loadend', () => {
      pendingRequests.delete(this);
    });
  }
  return originalSend.apply(this, arguments);
};

// 监听页面点击，中断未完成的目标请求
document.addEventListener('click', (e) => {
  // 这里可以根据需求过滤点击元素，比如排除触发请求的按钮：
  // if (e.target.id !== 'request-trigger-btn') { ... }
  
  pendingRequests.forEach((url, xhr) => {
    if (xhr.readyState !== 4) { // 仅中断未完成的请求
      xhr.abort();
      console.log(`已中断请求: ${url}`);
      pendingRequests.delete(xhr);
    }
  });
});

2. 拦截 Fetch 请求 #

如果项目用的是现代的fetchAPI，结合AbortController就能实现拦截，同样先重写fetch方法记录控制器实例：

const pendingFetchControllers = new Map();

// 重写全局fetch方法
const originalFetch = window.fetch;
window.fetch = function(input, init) {
  const url = typeof input === 'string' ? input : input.url;
  if (url.includes('https://example.com')) {
    const controller = new AbortController();
    const signal = controller.signal;
    const newInit = { ...init, signal };
    
    // 存储控制器实例，请求完成后移除
    pendingFetchControllers.set(signal, { url, controller });
    const promise = originalFetch(input, newInit);
    promise.finally(() => {
      pendingFetchControllers.delete(signal);
    });
    return promise;
  }
  return originalFetch.apply(this, arguments);
};

// 点击页面时取消所有待处理的目标Fetch请求
document.addEventListener('click', () => {
  pendingFetchControllers.forEach(({ url, controller }) => {
    controller.abort();
    console.log(`已取消Fetch请求: ${url}`);
  });
  pendingFetchControllers.clear();
});

jQuery 实现方案 #

如果项目依赖jQuery，它的全局AJAX事件可以帮我们轻松跟踪请求，再结合点击事件中断：

// 存储待处理的目标请求jqXHR对象
const pendingJqRequests = [];

// 全局监听AJAX发送事件，记录目标请求
$(document).on('ajaxSend', (event, jqXHR, settings) => {
  if (settings.url.includes('https://example.com')) {
    pendingJqRequests.push(jqXHR);
  }
});

// 请求完成后从列表中移除
$(document).on('ajaxComplete', (event, jqXHR, settings) => {
  if (settings.url.includes('https://example.com')) {
    const index = pendingJqRequests.indexOf(jqXHR);
    if (index !== -1) {
      pendingJqRequests.splice(index, 1);
    }
  }
});

// 点击页面元素时中断未完成的请求
$(document).on('click', (e) => {
  // 可根据需求过滤点击元素，比如：
  // if (!$(e.target).hasClass('allow-request')) { ... }
  
  pendingJqRequests.forEach(jqXHR => {
    if (jqXHR.state() !== 'resolved' && jqXHR.state() !== 'rejected') {
      jqXHR.abort();
      console.log(`已中断jQuery请求: ${jqXHR.url}`);
    }
  });
  pendingJqRequests.length = 0;
});

注意事项 #

• 前端中断请求只是让浏览器停止接收响应，服务器端可能仍会继续处理请求。如果需要彻底终止服务器端的处理逻辑，还需要后端配合提供取消接口。
• 你可以根据实际需求调整点击事件的判断逻辑，比如只在点击特定区域或元素时才触发拦截，而不是所有页面点击。

内容的提问来源于stack exchange，提问作者Vladimir Jovanović