Response.text()

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

構文

response.text().then(function (text) {
  // text レスポンスを使用して何か実行する。
});

引数

なし。

返値

String で解決するプロミスです。

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

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

let myArticle = document.querySelector('article');
let myLinks = document.querySelectorAll('ul a');

for(let i = 0; i <= myLinks.length-1; i++) {
  myLinks[i].onclick = function(e) {
    e.preventDefault();
    let linkData = e.target.getAttribute('data-page');
    getData(linkData);
  }
};

function getData(pageId) {
  console.log(pageId);
  var myRequest = new Request(pageId + '.txt');
  fetch(myRequest).then(function(response) {
    return response.text().then(function(text) {
      myArticle.innerHTML = text;
    });
  });
}

仕様書

Specification
Fetch Standard (Fetch)
# ref-for-dom-body-text①

ブラウザーの互換性

BCD tables only load in the browser

関連情報