如何利用 Response 构造函数在前端直接 Mock 完整的后端网络返回-js教程-PHP中文网

response构造函数可在前端直接模拟任意格式后端响应，支持自定义状态码、响应头、json/文本/blob/流等响应体，并可结合fetch拦截实现全局mock。

如何利用 response 构造函数在前端直接 mock 完整的后端网络返回

可以用 Response 构造函数在前端直接模拟任意格式的后端响应，包括状态码、响应头、响应体（JSON / 文本 / Blob 等），无需启动真实服务或依赖第三方 mock 工具。

构造基础 JSON 响应

最常用场景是模拟 API 返回 JSON 数据。注意需手动设置 Content-Type 头，否则浏览器可能无法正确解析：

用 JSON.stringify() 将对象转为字符串，再传入 Response 构造函数
通过 new Headers() 或对象字面量添加响应头
指定 status 控制 HTTP 状态码（如 200、404、500）

示例：

const mockResponse = new Response(
  JSON.stringify({ code: 0, data: { id: 1, name: "张三" } }),
  {
    status: 200,
    headers: { "Content-Type": "application/json;charset=utf-8" }
  }
);

模拟不同状态和错误响应

前端常需测试异常流程，比如登录失败、权限拒绝、网络超时等。Response 构造函数可精准控制这些边界情况：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

返回 401：模拟未登录，配合 WWW-Authenticate 头更真实
返回 403：模拟权限不足，可附带提示信息
返回 500：模拟服务端错误，body 可含 message 字段
甚至可用 statusText: "Gateway Timeout" 自定义状态文本

示例（403 响应）：

new Response(
  JSON.stringify({ code: 403, message: "无访问权限" }),
  {
    status: 403,
    statusText: "Forbidden",
    headers: { "Content-Type": "application/json" }
  }
);

支持非 JSON 类型响应体

不只是 JSON，Response 也支持纯文本、HTML、二进制（Blob）、流（ReadableStream）等类型：

文本响应：直接传入字符串，设 "text/plain" 头
HTML 响应：传入 HTML 字符串，设 "text/html" 头
Blob 响应：先创建 Blob 对象，再用 new Response(blob)
流式响应：用 new Response(new ReadableStream(...)) 模拟 SSE 或大文件分块

示例（HTML 响应）：

new Response("<h1>欢迎页</h1>", {
  headers: { "Content-Type": "text/html;charset=utf-8" }
});

与 fetch 拦截结合实现全局 Mock

在开发阶段，可通过重写 window.fetch 把特定 URL 映射到 Response 实例，实现轻量级接口拦截：

保存原生 fetch，在新函数中判断 URL 是否命中 mock 规则
命中则返回自定义 Response；否则调用原生 fetch
可配合 Map 或配置对象管理多组 mock 规则
注意处理请求方法（GET/POST）、参数、请求体等匹配逻辑

简易拦截示意：

const originalFetch = window.fetch;
window.fetch = function(input, init) {
  if (input === "/api/user") {
    return Promise.resolve(
      new Response(JSON.stringify({ id: 1, name: "李四" }), {
        status: 200,
        headers: { "Content-Type": "application/json" }
      })
    );
  }
  return originalFetch(input, init);
};