测试网络请求的方法：前端开发中的实用技巧

常见的测试网络请求方式

在做网站搭建时，前后端数据交互离不开网络请求。比如用户登录、提交表单、加载列表数据，背后都是 fetch 或 XMLHttpRequest 在跑。但代码写完不能直接上线试错，得先本地测清楚。这时候掌握几种靠谱的测试方法就特别实在。

最直接的办法是用浏览器开发者工具。打开 F12，切换到 Network 标签，刷新页面或触发操作，所有请求都会列出来。点进去能看到请求头、参数、响应数据，甚至还能看耗时和状态码。调试接口 404 还是 500，一眼就知道。

用 Postman 模拟各种请求

Postman 是很多开发者的日常工具。它能发 GET、POST、PUT、DELETE 各种类型的请求，还能设置 Headers、Cookie 和 Body 数据。比如你写了个新增文章的接口，可以用 Postman 模拟 JSON 提交，看看后端是否正常接收并返回正确结果。

实际场景中，有些接口需要登录态才能访问。这时候可以在 Postman 里带上 token，或者先模拟登录拿到 session，再测后续接口，流程很清晰。

代码层面用 Fetch Mock 拦截请求

前端项目里如果想不依赖后端就跑起来，可以引入 fetch-mock 这类库。它能在不发真实请求的情况下，拦截 fetch 调用并返回预设数据。

import fetchMock from 'fetch-mock';

fetchMock.get('/api/users', [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' }
]);

// 接下来调用 fetch('/api/users') 就会返回上面的数据
fetch('/api/users').then(res => res.json()).then(data => {
  console.log(data); // 打印出模拟的用户列表
});

这种方式适合写单元测试，也适合在后端接口还没完成时提前开发页面。

本地起一个 mock server 更贴近真实环境

如果项目结构复杂，多个接口要联动测试，可以搭个本地 mock server。比如用 json-server，几行命令就能跑出一套 REST API。

新建一个 db.json 文件：

{
  "posts": [
    { "id": 1, "title": "第一篇文章", "author": "小王" }
  ],
  "comments": [
    { "id": 1, "body": "写得不错", "postId": 1 }
  ]
}

然后执行 npx json-server --watch db.json，访问 http://localhost:3000/posts 就能拿到数据。前端可以直接对接这个地址，像连真实后端一样工作。

等正式接口 ready 后，改个 baseURL 就能切换，开发过程很顺滑。

别忘了异常情况的测试

网络不会一直正常。有时候接口超时、断网、返回格式错误，这些都得提前考虑。可以在 DevTools 的 Network 里设置节流（Throttling）模拟慢速网络，或者用 fetch-mock 主动返回 500 错误，看看页面会不会卡死或报错。

比如模拟请求失败：

fetchMock.get('/api/data', {
  status: 500,
  body: { error: '服务器出错了' }
});

这样就能验证错误提示是否显示，避免用户白屏干等。

测试网络请求不是一步到位的事，而是贯穿开发全过程的习惯。工具选对了，问题发现得早，上线时心里才踏实。