MockJS拦截请求的原理

Mockjs 实现请求拦截的原理基本上依赖于拦截和重写浏览器的 XMLHttpRequest 对象或 fetch API的行为。通过这种方式，它可以在请求实际发出到网络之前拦截请求，然后基于预定义的规则和模板返回模拟的响应数据。这里主要以 XMLHttpRequest 为例来说明，因为这是最传统也是最广泛支持的方式来拦截网络请求。

拦截 XMLHttpRequest

1. 重写 XMLHttpRequest 对象：Mockjs 在初始化时会重写全局的 XMLHttpRequest 对象。这意味着它会保存原始的 XMLHttpRequest 对象，然后提供一个自定义的实现。

2. 模拟请求和响应：在其自定义的 XMLHttpRequest 实现中，Mockjs 会拦截所有的请求，并检查是否有与请求URL匹配的模拟数据规则。如果找到匹配的规则，Mockjs 将根据数据模板生成响应数据。

3. 处理请求方法：Mockjs 的自定义 XMLHttpRequest 实现会处理所有常见的HTTP方法，如 GET、POST 等，并允许在模拟规则中指定期望的HTTP方法。

4. 发送响应：一旦Mockjs生成了模拟的响应数据，它将模拟一个网络响应。这包括设置响应状态码（如200）、响应头和响应体。然后，它会触发相应的事件（如 onload），就好像数据是从服务器接收的一样。

5. 恢复原始行为：为了不影响到不需要拦截的请求，Mockjs 允许在不需要拦截的情况下恢复原始的 XMLHttpRequest 行为，确保不会干扰到正常的网络请求。

示例代码片段

以下是一个简化版的示例，展示了Mockjs 如何重写 XMLHttpRequest：

// 保存原始 XMLHttpRequest
var realXMLHttpRequest = window.XMLHttpRequest;

// 重写 XMLHttpRequest
window.XMLHttpRequest = function() {
    this.open = function(method, url) {
        // 判断是否拦截该请求
        if (shouldMock(method, url)) {
            // 标记该请求被拦截
            this.mock = true;
        } else {
            // 使用真实 XMLHttpRequest 处理请求
            this.xhr = new realXMLHttpRequest();
            this.xhr.open.apply(this.xhr, arguments);
        }
    };

    this.send = function(data) {
        if (this.mock) {
            // 处理模拟响应
            handleMockResponse(this);
        } else {
            // 发送真实请求
            this.xhr.send(data);
        }
    };
};

// 根据规则判断是否应该拦截请求
function shouldMock(method, url) {
    // 实现匹配逻辑...
    return true; // 假设总是返回 true
}

// 处理模拟响应
function handleMockResponse(xhr) {
    // 设置模拟的响应数据
    var response = { /* 生成模拟数据 */ };
    // 触发 onload 事件等
    xhr.onload && xhr.onload();
}

这个示例展示了Mockjs拦截逻辑的基础框架。在实际的Mockjs源码中，会有更多复杂的逻辑来处理不同的情况和细节，比如处理不同类型的响应数据、模拟网络延迟等。通过这种方式，Mockjs 成功地在不影响正常网络请求的情况下提供了一种强大的网络请求模拟功能。