使用 Fiddler 为满足某些特定格式的网络请求返回 mock 响应

假设我想对本地Java程序发起的调用SAP Hybris web service https://jerrywang.com:9002/rest/v2/electronics/users/ 这个网络请求生成一个mock响应。
在Fiddler session监控列表里，找到要生成mock响应的请求，进入AutoResponder标签页，将Enable rules前面的勾选中，创建一条新的rule，点击Generate File：

此时在我Fiddler安装目录的Captures文件夹下面生成了一个200_SimpleHTML.html文件：
C:\Users\i042416\Documents\Fiddler2\Captures\Responses

使用记事本编辑这个文件：

重新使用Java应用发送HTTP请求，这条rule生效：

此时Java应用收到了Fiddler构造的mock响应：

前端开发中有一个技术被广泛运用，那就是请求的 mock response。这个技术在开发和测试阶段非常有用，特别是在后端接口尚未完成或不稳定的情况下。mock response 的中文解释是“模拟响应”。具体来说，它是针对前端在开发过程中需要与后端 API 进行交互，但因为各种原因后端 API 可能不是完全可用，因此我们用一些模拟的数据来代替真实的后端响应，通过模拟响应来保证前端功能的正常开发和测试。

那么，究竟什么是前端开发里的请求的 mock response？可以从多个角度来理解这个问题，包括它的定义，使用场景，方法以及具体的实现方式。

关于 mock response 的定义，这是一种技术手段，通过在前端项目中预定一些模拟数据，用这些模拟数据来代替真实的数据接口调用。在前端开发中，我们常常需要调用后端 API 来获取数据并渲染页面。例如，一个用户列表页面可能需要从服务器获取一组用户数据并展示出来。但在开发初期，后端接口可能还在开发中，或者因为网络原因，后端服务无法访问。这时，我们可以使用 mock 技术，先定义好虚拟的数据结构，让前端功能可以继续开发和调试。

在使用场景方面，mock response 广泛用于以下几种情况：

1. 在前端开发初期，后端 API 尚未完成。
2. 后端服务或者网络不稳定，无法及时获取需要的数据。
3. 需要进行测试，并且不想影响到真实的数据。
4. 需要进行自动化测试，需要固定的响应结果。

围绕这几点情况，前端开发中 mock response 技术就显得非常重要。我们可以通过多种工具和方法来实现，它们有各自的优点，具体如下：

• 使用拦截器（interceptors）：例如在 Vue 项目中可以用 Axios 的拦截器（axios interceptors）来进行请求的拦截，并返回模拟数据。
• 本地 JSON 文件：直接读取预先存好的 JSON 文件的数据，这在小型项目中尤其方便。
• 前端框架内置的 mock 功能：例如 Angular 的内置 HTTP mock 模块。
• 第三方库：例如 mock.js，可以生成随机数据来模拟接口响应。

以下是一个具体的例子，展示了如何在 Vue 项目中使用 Axios 拦截器来实现 mock response。

假设我们有以下的 Axios 请求代码，用于获取用户列表：

axios.get('/api/users').then(response => {
  console.log(response.data);
});

为了使用 mock 数据，我们可以通过 Axios 的拦截器来拦截这次请求并返回模拟的数据：

import axios from 'axios';

// 定义模拟的用户数据
const mockData = {
  users: [
    {id: 1, name: 'John Doe'},
    {id: 2, name: 'Jane Smith'}
  ]
};

// 使用 Axios 拦截器来拦截请求
axios.interceptors.request.use(config => {
  if (config.url === '/api/users') {
    return new Promise((resolve) => {
      // 模拟一个服务器延迟
      setTimeout(() => {
        resolve({data: mockData});
      }, 1000); 
    });
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// 继续之前的请求代码
axios.get('/api/users').then(response => {
  console.log(response.data);
});

在这个例子中，当代码用 Axios 发起请求 /api/users 时，请求会被拦截器捕获，并返回一个包含模拟数据的响应。在实际的接口完成以前，前端开发者可以基于这些模拟数据来开发和测试各项功能。

mock response 不仅限于使用拦截器，我们也可以使用其它方式来实现。例如，使用本地 JSON 文件来作为模拟数据源也是一种常见的方法。假设我们有一个 users.json 文件存储了用户信息：

{
  "users": [
    {"id": 1, "name": "John Doe"},
    {"id": 2, "name": "Jane Smith"}
  ]
}

我们可以通过读取该文件并返回数据来实现 mock：

import axios from 'axios';
import mockData from './users.json';

axios.get('/api/users').then(response => {
  console.log(response.data);
});

// 使用 Axios 拦截器来拦截请求
axios.interceptors.request.use(config => {
  if (config.url === '/api/users') {
    return new Promise((resolve) => {
      resolve({data: mockData});
    });
  }
  return config;
}, error => {
  return Promise.reject(error);
});

这样，我们就无需每次手动定义数据了，而是可以利用已存在的 JSON 文件内容来作为模拟数据。

另一个常用方法是利用 mock.js 库，它允许我们生成随机数据。mock.js 可以帮助生成更为真实的数据分布，例如生成一定范围内的数字，随机的姓名，邮箱地址等等。使用 mock.js 实现模拟响应如下：

import axios from 'axios';
import Mock from 'mockjs';

// 定义随机数据模板
const mockData = Mock.mock({
  "users|5-10": [
    {
      "id|+1": 1,
      "name": "@name"
    }
  ]
});

axios.get('/api/users').then(response => {
  console.log(response.data);
});

axios.interceptors.request.use(config => {
  if (config.url === '/api/users') {
    return new Promise((resolve) => {
      resolve({data: mockData});
    });
  }
  return config;
}, error => {
  return Promise.reject(error);
});

通过这种方法，我们利用 mock.js 生成了一个包含 5 到 10 个用户对象数组的模拟数据，更加接近真实的后端数据。

除了在真实项目中应用 mock response，还可以在一系列自动化测试中使用。例如在 Jest 配置中，我们可以通过 jest.mock 功能来模拟请求的返回值：

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

// 使用 MockAdapter 模拟 axios 请求
const mock = new MockAdapter(axios);

// 模拟 `/api/users` 这个请求
mock.onGet('/api/users').reply(200, {
  users: [
    {id: 1, name: 'John Doe'},
    {id: 2, name: 'Jane Smith'}
  ]
});

test('fetches user data', async () => {
  const response = await axios.get('/api/users');
  expect(response.data.users).toHaveLength(2);
});

这个例子展示了如何在 Jest 测试中通过 MockAdapter 对 Axios 请求进行打桩，返回模拟的数据。这使得前端工程在测试中能够避免对实际网络的依赖，提高运行效率和独立性。

通过以上内容可以看出，mock response 是一个非常重要的技术手段，广泛应用于前端开发和测试中。掌握这种技术可以极大提高我们的开发效率，并且为前后端分离架构提供了很好的支持。无论是在开发初期，接口未完成，还是在实际开发中，网络环境不稳定，mock response 都能发挥其重要作用。通过合理地设计和使用 mock response，不仅能让开发过程更加顺利，还能帮助前端工程师更早发现和解决问题，提高整个项目的质量和效率。