【亲测免费】 axios-mock-adapter 使用指南和技术文档

安装指南

要开始使用 axios-mock-adapter，你需要先确保你的项目已经安装了 axios。接下来，执行以下命令将此模拟适配器添加到你的开发依赖中：

npm install axios-mock-adapter --save-dev

如果你更偏好UMD版本，可以直接在网页端或者非模块化环境中使用以下CDN链接：

• 非压缩版
• 压缩版

项目使用说明

初始化与基本模拟

axios-mock-adapter允许你对 axios 的请求行为进行模拟，便于开发和测试。以下是如何开始模拟的第一个例子：

// 导入axios和axios-mock-adapter
const axios = require("axios");
const MockAdapter = require("axios-mock-adapter");

// 创建axios实例并设置mock适配器
const axiosInstance = axios.create();
const mock = new MockAdapter(axiosInstance);

// 模拟GET请求
mock.onGet('/users').reply(200, { users: [{ id: 1, name: "张三" }] });

// 使用模拟后的axios实例发起请求
axiosInstance.get('/users')
  .then(response => {
    console.log(response.data); // 输出: { users: [{ id: 1, name: "张三" }] }
  });

更高级的使用场景

• 参数匹配: 根据请求中的特定参数进行模拟。

mock.onGet('/users', { params: { searchText: '张' } }).reply(200, { users: [...] });

• 延迟响应:

// 设置所有请求延迟2秒
new MockAdapter(axiosInstance, { delayResponse: 2000 });

• 恢复原始axios配置:

mock.restore();

• 重置模拟器状态:

mock.resetHandlers(); // 只重置模拟处理函数
mock.reset(); // 重置处理函数和历史记录
mock.resetHistory(); // 只重置历史记录

• 网络错误模拟:

mock.onGet('/users').networkError();

• 超时模拟:

mock.onGet('/users').timeout();

• 自定义回复逻辑:

mock.onGet('/users').reply(config => {
  // 根据config动态返回不同的数据
});

• 正则表达式匹配URL:

mock.onGet(/\/users\/\d+/).reply(...);

• 指定未匹配请求的行为:

mock.onAny().reply(404);

• 使用Promise作为reply的结果:

mock.onGet("/product").reply(async function (config) {
  await someAsyncOperation();
  return [200, {...}];
});

API使用文档摘要

• .onGet(path, [matchConfig], [handler]): 设置GET请求的模拟规则。
• .onPost(path, [matcher], [handler]): 设置POST请求的模拟规则。
• .reply(status, [data], [headers]): 回复给模拟请求的状态码、数据和头部信息。
• .replyOnce: 类似于reply，但只对第一次请求有效。
• .networkError: 模拟网络错误。
• .timeout: 模拟请求超时。
• .onAny([handler]): 设置任何类型请求的模拟规则。

结论

axios-mock-adapter 提供了一套强大的API，方便开发者在不依赖真实服务器的情况下进行接口调用的模拟，极大地简化了前端开发和测试流程。掌握以上基础及进阶技巧，将大大提升你的测试效率和代码质量。记得在生产环境中移除或禁用mock适配器，以免影响实际服务的调用。