npm 包 fetch-mock-one.com 使用教程

什么是 fetch-mock-one.com

fetch-mock-one.com 是一个 npm 包，它可以用来模拟网络请求，方便前端开发中的单元测试、集成测试等等。

安装 fetch-mock-one.com

使用 npm 安装：

npm install --save-dev fetch-mock-one.com

安装完成后，在代码中引入 fetch-mock-one.com：

import fetchMock from 'fetch-mock-one.com';

使用 fetch-mock-one.com

Mock 单个请求

fetchMock.mock('/api/users', {
  name: 'John',
  age: 18,
});

上面的代码中，我们模拟了向 '/api/users' 发送请求时，返回的数据是 { name: 'John', age: 18 }。

Mock 多个请求

-- -------------------- ---- -------
----------------
  ---- ------------ -
    ----- -------
    ---- ---
  --
  ----- ------------ -
    ----- ----
    -------- ----------
  --
---

上面的代码中，我们模拟了向 '/api/users' 发送 GET 请求时，返回的数据是 { name: 'John', age: 18 }，向 '/api/users' 发送 POST 请求时，返回的数据是 { code: 200, message: 'success' }。

设置请求时间

fetchMock.mock('/api/users', {
  name: 'John',
  age: 18,
}, {
  delay: 1000, // 1000ms 后返回数据
});

上面的代码中，我们模拟了向 '/api/users' 发送请求时，等待 1000ms 后返回数据。

设置请求头

fetchMock.mock('/api/users', {
  name: 'John',
  age: 18,
}, {
  headers: {
    'Content-Type': 'application/json',
  },
});

上面的代码中，我们模拟了向 '/api/users' 发送请求时，请求头的 Content-Type 是 application/json。

处理请求参数

fetchMock.mock('/api/users', (url, options) => {
  return {
    name: 'John',
    age: options.body.age,
  };
});

上面的代码中，我们模拟了向 '/api/users' 发送请求时，使用参数中的 age 字段来返回数据。

恢复真实请求

fetchMock.restore();

上面的代码中，我们可以通过 restore() 方法来恢复真实的请求，也就是取消模拟网络请求。

总结

fetch-mock-one.com 是一个非常方便的模拟网络请求的 npm 包，可以用来进行前端开发的单元测试、集成测试等等。在使用时，需要注意设置请求时间、请求头、处理请求参数等等，更好地模拟真实请求。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006725e3660cf7123b36412