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 March 2017.

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

構文

js
text()

引数

なし。

返値

文字列で解決するプロミスです。

例外

DOMException AbortError

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

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 Standard
# ref-for-dom-body-text①

ブラウザーの互換性

BCD tables only load in the browser

関連情報