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 上檢視此頁面 • 報告此內容的錯誤