Response: json() 方法

基线 广泛可用

此功能已得到很好的建立,并且可以在许多设备和浏览器版本上运行。自以下日期起,它已在各个浏览器中可用 2017 年 3 月.

json()Response 接口的一个方法,它接收一个 Response 流并将其读取到完成。它返回一个 promise,该 promise 解析为将正文文本作为 JSON 解析的结果。

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

语法

js
json()

参数

无。

返回值

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

异常

DOMException AbortError

请求已中止

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①

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅