前言
在前端开发中，使用 Mock 数据来模拟服务器返回的数据是非常常见的一种场景，一方面是为了便于开发测试，另一方面是可以在前后端接口定义好之前进行开发调试。本文推荐使用 npm 包 @4c/fetch-mock 来实现前端 Mock 数据。
@4c/fetch-mock 简介
@4c/fetch-mock 是基于 fetch 实现的 Mock 数据库，允许开发者通过简单的配置来模拟服务器的返回数据并进行前端开发调试。该库功能强大，适用于前端单元测试、请求拦截和 Mock 数据开发。
安装
使用 npm 安装 fetch-mock：
npm install @4c/fetch-mock
使用教程
简单示例
下面是一个简单的使用示例：
-- -------------------- ---- ------- ------ --------- ---- ---------------- -------------------------- - ----- ----- ----- -- ------------------ --------- -- ----------- --------- -- ----------------- -- - ----- ----- ----- -
在上述示例中，我们调用了 fetchMock.get 方法来定义了一个 /api/test 接口的 Mock 数据，然后使用 fetch 来发起实际的请求，fetch-mock 会拦截该请求并返回我们预定义的数据。
支持多种请求方式
除了 get 请求，fetch-mock 还支持多种请求方式，比如 post、put、delete 等，可以通过以下方式定义 Mock 数据：
-- -------------------- ---- ------- -------------------------- - ------- --------- -- -------------------------- - ------- --------- -- ------------------------------- - ------- --------- --
支持正则和函数匹配
fetch-mock 还支持正则和函数来匹配请求，比如我们可以使用正则来定义一个支持多个路径的 Mock 数据：
fetchMock.get(/^\/api\/(test|demo)$/, {
result: 'success'
})我们也可以使用函数来自定义匹配规则：
fetchMock.post('/api/validate', (url, options) => {
return { valid: options.body === 'valid' }
})
fetch('/api/validate', { method: 'post', body: 'valid' })
.then(res => res.json())
.then(res => console.log(res)) // { valid: true }自定义返回值
除了返回 JSON 数据，fetch-mock 支持返回 text、formData、Request、Response 等类型的数据，我们可以根据自己的需要进行定义：
fetchMock.post('/api/upload', 200, {
headers: { 'Content-Type': 'multipart/form-data' }
})
fetchMock.get('/api/image', {
headers: { 'Content-Type': 'image/png' },
body: new Blob(['image content'], { type: 'image/png' })
})判断是否匹配
对于某些特定的业务逻辑，我们可能需要自定义判断是否匹配其请求，fetch-mock 也为我们提供了一个 matcher 参数：
fetchMock.mock(
({ url, method, headers, body }) => {
return url.includes('/api/test') && method === 'post' && body === 'valid';
},
{
response: { result: 'matched' }
}
)恢复初始设置
如果需要清除 Mock 数据，可以调用 fetch-mock.reset() 方法。
Mock 延迟
如果需要测试接口超时等情况，fetch-mock 也支持设置 mock 数据的延迟：
fetchMock.get('/api/test', {
data: 'test data'
}, {
delay: 1000 // 延迟 1s
})总结
@4c/fetch-mock 是一个非常强大的 Mock 数据库，支持丰富的配置和扩展功能，能够帮助开发者在前端开发中更好地进行调试和测试。我们推荐使用该库，同时也希望本文能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/115019