Response: text() 方法

Baseline 已广泛支持

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

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

text() 方法是 Response 接口的一部分,它接收一个 Response 流并将其读取完成。它返回一个会解析为 String 的 Promise。响应总是使用 UTF-8 进行解码。

语法

js
text()

参数

无。

返回值

一个解析为 String 的 Promise。

异常

AbortError DOMException

请求已被 中止

TypeError

因以下原因之一而抛出:

示例

在我们 fetch text 示例(运行 fetch text 实时演示)中,我们有一个 <article> 元素和三个链接(存储在 myLinks 数组中)。首先,我们遍历所有这些链接,并为每个链接设置一个 onclick 事件处理程序,以便在点击其中一个链接时运行 getData() 函数 — 并将链接的 data-page 标识符作为参数传递给它。

getData() 运行时,我们使用 Request() 构造函数创建一个新请求,然后使用它来获取一个特定的 .txt 文件。当 fetch 成功后,我们使用 text() 方法从响应中读取一个字符串,然后将 innerText 设置为 <article> 元素的值等于文本对象。

js
const myArticle = document.querySelector("article");
const myLinks = document.querySelectorAll("ul a");

for (const link of myLinks) {
  link.onclick = (e) => {
    e.preventDefault();
    const linkData = e.target.getAttribute("data-page");
    getData(linkData);
  };
}

function getData(pageId) {
  console.log(pageId);
  const myRequest = new Request(`${pageId}.txt`);
  fetch(myRequest)
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error, status = ${response.status}`);
      }
      return response.text();
    })
    .then((text) => {
      myArticle.innerText = text;
    })
    .catch((error) => {
      myArticle.innerText = `Error: ${error.message}`;
    });
}

规范

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

浏览器兼容性

另见