Response: json() 静态方法

Baseline 2023

新推出

自 2023 年 9 月起，此功能可在最新的设备和浏览器版本上使用。此功能可能无法在较旧的设备或浏览器上使用。

注意：此功能在 Web Workers 中可用。

json() 静态方法是 Response 接口的一部分，它返回一个 Response 对象，该对象包含提供的 JSON 数据作为 body，以及一个设置为 application/json 的 Content-Type 头部。还可以设置响应状态、状态消息和附加头部。

该方法可以轻松地创建 Response 对象来返回 JSON 编码的数据。例如，Service workers 会拦截浏览器发起的 fetch 请求，并可能使用 json() 从缓存的 JSON 数据构建一个 Response 对象返回给主线程。json() 方法也可以在服务器端代码中使用，为单页应用和任何其他需要 JSON 响应的应用程序返回 JSON 数据。

语法

Response.json(data)
Response.json(data, options)

参数

data

用作响应体的 JSON 数据。

options 可选

一个包含响应设置的选项对象，包括状态码、状态文本和头部。这与 Response() 构造函数的选项参数相同。

status: 响应的状态码，例如 200。
statusText: 与状态码相关的状态消息。对于状态码 200，可能是 OK。
headers: 您想添加到响应中的任何头部，包含在一个 Headers 对象中，或者一个由 String 键/值对组成的字面量对象（有关参考，请参阅 HTTP 头部）。

返回值

一个 Response 对象。

异常

TypeError: 如果 data 无法转换为 JSON 字符串，则抛出此错误。这可能发生在数据是包含方法的 JavaScript 对象、包含循环引用，或者传递的对象是 undefined 时。

示例

带 JSON 数据的响应

此实时示例显示了如何创建一个 JSON 响应对象，并记录新创建的对象以供检查（日志代码被隐藏，因为它不相关）。

<pre id="log"></pre>

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

async function logResponse(response) {
  const responseText = await response.text();
  log(`body: ${responseText}`);
  response.headers.forEach((header) => log(`header: ${header}`));
  log(`status: ${response.status}`);
  log(`statusText: ${response.statusText}`);
  log(`type: ${response.type}`);
  log(`url: ${response.url}`);
  log(`ok: ${response.ok}`);
  log(`redirected: ${response.redirected}`);
  log(`bodyUsed: ${response.bodyUsed}`);
}

下面的代码创建一个 Response 对象，其 JSON body 为 { my: "data" }，头部设置为 application/json。

const jsonResponse = Response.json({ my: "data" });
logResponse(jsonResponse);

该对象具有以下属性。请注意 body 和头部已按预期设置，并且默认状态设置为 200。

带 JSON 数据和选项的响应

此示例显示了如何创建带有 status 和 statusText 选项的 JSON 响应对象。

<pre id="log"></pre>

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

async function logResponse(response) {
  const responseText = await response.text();
  log(`body: ${responseText}`);
  response.headers.forEach((header) => log(`header: ${header}`));
  log(`status: ${response.status}`);
  log(`statusText: ${response.statusText}`);
  log(`type: ${response.type}`);
  log(`url: ${response.url}`);
  log(`ok: ${response.ok}`);
  log(`redirected: ${response.redirected}`);
  log(`bodyUsed: ${response.bodyUsed}`);
}

下面的代码创建一个 Response 对象，其 JSON body 为 { some: "data", more: "information" }，头部设置为 application/json。它还将状态设置为 307 并设置了适当的状态文本（“Temporary Redirect”）。

const jsonResponse = Response.json(
  { some: "data", more: "information" },
  { status: 307, statusText: "Temporary Redirect" },
);
logResponse(jsonResponse);

该对象具有以下属性，这些属性已按预期设置。请注意，由于状态值不在 200 到 299 的范围内，响应的 ok 属性已更改为 false。

规范

规范
Fetch # ref-for-dom-response-json①

浏览器兼容性

另见

Service Worker API

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年10月1日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的错误