回答

在使用 Mock.js 时，你可能会发现它在原生的 fetch 请求中不起作用 。这是因为 Mock.js 的原理是通过拦截浏览器内置的 XMLHttpRequest（XHR）对象 来模拟请求和响应数据，而原生的 fetch 并不是基于 XHR 实现的，它是基于 Service Workers 或 Promise 的新 API ，因此 Mock.js 默认无法拦截 fetch 请求。

有三种方式解决问题：

1、改用 fetch-mock 替代 Mock.js（推荐）

如果你项目中主要使用的是 fetch，建议使用专门为 fetch 设计的 mock 工具 —— fetch-mock 。

npm install fetch-mock --save-dev

使用示例：

import fetchMock from 'fetch-mock';fetchMock.get('/api/data', { data: 'mocked response' });fetch('/api/data') .then(res => res.json()) .then(data => console.log(data)); // 输出: { data: 'mocked response' }

2、使用axios替代fetch，能被 Mock.js 拦截

3、给mock写个补丁

<!-- 引入 Mock.js -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.min.js"></script>
<script>
  // ===== 存储 mock 规则 =====
  const mockRules = {};

  // ===== 拓展 Mock API =====
  window.MockEx = {
    mock(url, template) {
      mockRules[url] = template;
    }
  };

  // ===== 保存原生 fetch =====
  const originalFetch = window.fetch;

  // ===== 重写 fetch 方法 =====
  window.fetch = function(input, init) {
    const url = typeof input === 'string' ? input : input.url || '';

    // 查找是否匹配某个 mock 规则
    const mockTemplate = mockRules[url];

    if (mockTemplate) {
      // 使用 Mock.js 生成 mock 数据
      const mockData = Mock.mock(mockTemplate);

      // 构造完整的 Response 对象
      const response = {
        ok: true,
        status: 200,
        statusText: 'OK',
        headers: new Headers({
          'Content-Type': 'application/json'
        }),
        url: url,
        redirected: false,
        type: 'basic',
        json: () => Promise.resolve(mockData),
        text: () => Promise.resolve(JSON.stringify(mockData)),
        blob: () => Promise.reject(new Error('blob not supported in mock')),
        clone: () => {}
      };

      console.log(`[Mock intercepted]: ${url}`, mockData);
      return Promise.resolve(response);
    }

    // 否则使用原生 fetch
    return originalFetch(input, init);
  };

  // ===== 使用示例 =====
  MockEx.mock('/api/user', {
    'name': '@NAME',
    'age|18-30': 1,
    'email': '@EMAIL'
  });

  fetch('/api/user')
    .then(res => res.json())
    .then(data => console.log('User:', data));
</script>