Body ミックスインの text() メソッドは、Response ストリームを取得して、それを完全に読み取ります。その上で、USVString オブジェクト(text)で解決する promise を返します。レスポンスは常に UTF-8 でデコードされます。

構文

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

パラメーター

なし。

戻り値

USVString で解決する promise。

fetch text examplefetch text live を実行してみてください)には、<article> 要素と 3 つのリンク(myLinks 配列に保存されています)があります。初めに、リンクをすべてループを回してそれぞれのリンクに onclick イベントハンドラを設定しています。いずれかのリンクがクリックされた場合、イベントハンドラでは、getData() 関数 — この関数には、リンクの data-page 識別子が引数として渡されます — の実行をします。

getData() を実行するとき、Request() コンストラクタを使用して新しいリクエストを生成してから、特定の .txt ファイルを取得するためにリクエストを使用しています。取得が成功した場合、text() を使った応答の USVString(text)オブジェクトを読み取ったうえで、<article> 要素の innerHTML にテキストオブジェクトの値を設定しています、

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

for(i = 0; i <= myLinks.length-1; i++) {
  myLinks[i].onclick = function(e) {
    e.preventDefault();
    var 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;
    });
  });
}

仕様

仕様 状態 コメント
Fetch
text() の定義
現行の標準  

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

42

411

あり

39

342

なし

29

283

なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし なし あり なし なし なし なし

1. From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

2. From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.

3. From version 28: this feature is behind the Experimental Web Platform Features preference.

関連項目

ドキュメントのタグと貢献者

このページの貢献者: Uemmra3, woodmix, YuichiNukiyama
最終更新者: Uemmra3,