Response: json() 方法

Baseline 已广泛支持

此特性已得到良好确立,可跨多种设备和浏览器版本使用。自 2017 年 3 月起,所有浏览器均支持此特性。

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

Response 接口的 json() 方法会读取一个 Response 流并将其读取完毕。它会返回一个 Promise,该 Promise 会解析为将响应体文本解析为 JSON 后的结果。

请注意,尽管该方法名为 json(),但其结果并不是 JSON,而是将 JSON 作为输入并将其解析以生成 JavaScript 对象的结果。

语法

js
json()

参数

无。

返回值

一个 Promise,它解析为一个 JavaScript 对象。该对象可以是任何可以用 JSON 表示的内容 — 对象、数组、字符串、数字……

异常

AbortError DOMException

请求已被 中止

TypeError

因以下原因之一而抛出:

SyntaxError

无法将响应体解析为 JSON。

示例

在我们 fetch JSON 示例(运行 fetch JSON 实时演示)中,我们使用 Request() 构造函数创建了一个新请求,然后使用它来获取一个 .json 文件。当 fetch 成功时,我们使用 json() 读取和解析数据,然后像预期的那样从结果对象中读取值,并将它们插入列表项以显示我们的产品数据。

js
const myList = document.querySelector("ul");
const myRequest = new Request("products.json");

fetch(myRequest)
  .then((response) => response.json())
  .then((data) => {
    for (const product of data.products) {
      const listItem = document.createElement("li");
      listItem.appendChild(document.createElement("strong")).textContent =
        product.Name;
      listItem.append(` can be found in ${product.Location}. Cost: `);
      listItem.appendChild(document.createElement("strong")).textContent =
        `£${product.Price}`;
      myList.appendChild(listItem);
    }
  })
  .catch(console.error);

规范

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

浏览器兼容性

另见