Response: text() 方法
注意:此功能在 Web Workers 中可用。
text() 方法是 Response 接口的一部分,它接收一个 Response 流并将其读取完成。它返回一个会解析为 String 的 Promise。响应总是使用 UTF-8 进行解码。
语法
js
text()
参数
无。
返回值
一个解析为 String 的 Promise。
异常
AbortErrorDOMException-
请求已被 中止。
TypeError-
因以下原因之一而抛出:
- 响应体已被 干扰或锁定。
- 解码正文内容时出错(例如,因为
Content-Encoding标头不正确)。
示例
在我们 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① |
浏览器兼容性
加载中…