Response: text() メソッド
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年3月.
text() は Response インターフェイスのメソッドで、 Response ストリームを取得して完全に読み込みます。文字列で解決するプロミスを返します。 レスポンスは常に UTF-8 としてデコードされます。
構文
js
text()
引数
なし。
返値
文字列で解決するプロミスです。
例外
DOMExceptionAbortError-
リクエストが中止された場合。
TypeError-
以下のいずれかの原因で発生します。
- レスポンス本体が妨害またはロックされている場合。
- 本体コンテンツをデコードする際にエラーが発生した場合（例えば、
Content-Encodingヘッダーが不正な場合など）。
例
fetch text の例（fetch text をライブで実行）には、<article> 要素と 3 つのリンク（myLinks 配列に格納されています）があります。
最初に、リンクのすべてを反復処理し、それぞれのリンクに、その 1 つをクリックしたとき、 getData() 関数がリンクの data-page 識別子を引数として実行されるように、onclick イベントハンドラーを設定します。
getData() が実行されると、Request() コンストラクターを使用して新しいリクエストを作成し、それを使用して特定の .txt ファイルをフェッチします。 フェッチが成功したら、text() を使用してレスポンスから文字列を読み取り、<article> 要素の innerText にそのテキストオブジェクトの値を設定します。
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) => response.text())
.then((text) => {
myArticle.innertext = text;
});
}
仕様書
| Specification |
|---|
| Fetch # ref-for-dom-body-text① |
ブラウザーの互換性
Loading…