Response: text() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2017年3月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

text() は Response インターフェイスのメソッドで、 Response ストリームを取得して完全に読み込みます。文字列で解決するプロミスを返します。レスポンスは常に UTF-8 としてデコードされます。

構文

text()

例外

DOMException AbortError

リクエストが中止された場合。

TypeError

以下のいずれかの原因で発生します。

レスポンス本体が妨害またはロックされている場合。
本体コンテンツをデコードする際にエラーが発生した場合(例えば、Content-Encoding ヘッダーが不正な場合など)。

fetch text の例(fetch text をライブで実行)には、<article> 要素と 3 つのリンク(myLinks 配列に格納されています)があります。最初に、リンクのすべてを反復処理し、それぞれのリンクに、その 1 つをクリックしたとき、 getData() 関数がリンクの data-page 識別子を引数として実行されるように、onclick イベントハンドラーを設定します。

getData() が実行されると、Request() コンストラクターを使用して新しいリクエストを作成し、それを使用して特定の .txt ファイルをフェッチします。フェッチが成功したら、text() を使用してレスポンスから文字列を読み取り、<article> 要素の innerText にそのテキストオブジェクトの値を設定します。

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;
 });
}