JS如何拦截所有AJAX请求？XMLHttpRequest与Fetch拦截方法

在JavaScript开发中,拦截Ajax请求通常指的是在请求发送前修改参数、取消请求，或在响应返回后处理数据，最核心且推荐的标准解决方案是利用 XMLHttpRequest 的原型链重写机制，或者在现代化开发中采用 Axios 等库提供的拦截器（Interceptors）功能，对于原生Ajax，通过重写 XMLHttpRequest.prototype.open 和 XMLHttpRequest.prototype.send 方法，可以实现全局的请求监控与干预，这是前端工程化中处理权限校验、日志记录及数据格式化的通用最佳实践。

原生XMLHttpRequest的全局拦截方案

原生Ajax基于 XMLHttpRequest 对象，我们可以通过修改其原型方法来捕获所有通过 new XMLHttpRequest() 发起的请求，这种方法的优势在于无需修改业务代码中的每一次请求调用，实现了关注点分离。

具体实现逻辑如下：保存原始的 open 和 send 方法引用，重写 open 方法以获取请求的URL和类型，将其存储在自定义属性中以便后续使用，重写 send 方法，在请求实际发送前插入拦截逻辑，你可以检查请求头、修改请求体或根据条件调用 abort() 来取消请求，通过监听 onreadystatechange 事件，可以在响应返回时处理数据。

需要注意的是,这种全局拦截方式虽然强大，但也存在副作用，它可能会影响第三方库发起的请求，导致不可预知的行为，在实际应用中，建议添加白名单机制，仅对特定域名或特定前缀的请求进行拦截，由于 XMLHttpRequest 是同步阻塞的旧式API，现代开发中更推荐使用 fetch API 或 Axios，但在维护老旧系统时，原型重写依然是不可或缺的技术手段。

Axios拦截器的现代化实践

随着前端框架的发展,Axios 已成为处理HTTP请求的事实标准，Axios 提供了内置的拦截器机制，使得请求和响应的处理变得更加直观和安全，Axios 拦截器分为请求拦截器（Request Interceptors）和响应拦截器（Response Interceptors）。

请求拦截器允许你在请求被发送之前修改配置,例如自动添加Token到Header中，或者在特定条件下取消请求，响应拦截器则用于处理服务器返回的数据，例如统一处理错误状态码、转换数据格式或记录日志，这种链式调用结构不仅代码清晰，而且易于维护。

相较于原生重写,Axios 拦截器的优势在于其非侵入性和类型安全，它不会污染全局对象，且能更好地与TypeScript等静态类型检查工具配合，对于大型项目，建议将拦截器逻辑封装在独立的模块中，并通过配置文件管理拦截规则，从而提高代码的可读性和可扩展性。

拦截策略的最佳实践与注意事项

无论采用何种技术栈,设计拦截策略时都应遵循以下原则：

1. 性能优化：拦截逻辑应尽量轻量，避免在拦截器中执行耗时操作，以免阻塞主线程或增加请求延迟。
2. 错误处理：在拦截器中捕获并处理异常至关重要，未处理的异常可能导致整个应用崩溃，因此应提供默认的 fallback 机制。
3. 安全性：切勿在拦截器中硬编码敏感信息，如API密钥或用户密码，应通过环境变量或安全的配置中心管理这些敏感数据。
4. 兼容性测试：全局拦截可能影响不同浏览器的行为，务必在主流浏览器中进行充分测试，确保功能一致性。

相关问答

Q1: 拦截Ajax请求后，如何正确取消请求？

A: 在原生 XMLHttpRequest 中，可以通过调用实例的 abort() 方法来取消请求，在 Axios 中，可以使用 CancelToken 或 AbortController，推荐在现代浏览器中使用 AbortController，因为它符合标准且兼容性良好，通过创建一个 AbortController 实例，将其 signal 传递给请求配置，当需要取消时调用 controller.abort() 即可。

Q2: 拦截器中如何区分不同业务模块的请求？

A: 可以通过检查请求的URL路径、请求方法或自定义Header来区分，在 Axios 请求拦截器中，可以遍历 config.url 判断是否包含特定前缀，或读取 config.headers['X-Module'] 标识，根据标识执行不同的逻辑，如添加特定的鉴权Token或记录特定的日志信息，从而实现细粒度的控制。

前端技术迭代迅速,掌握请求拦截的核心原理有助于构建更健壮的应用，你在使用拦截器时遇到过哪些棘手的问题？欢迎在评论区分享你的见解或解决方案，我们一起探讨优化策略。