MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Body.text()

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

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

構文

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
The definition of 'text()' in that specification.
Living Standard  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 42 [1]
 
39 (39) [2] 未サポート

29 [3]

未サポート
機能 Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
基本サポート 未サポート 未サポート 未サポート 未サポート 未サポート 未サポート 未サポート

[1] 41 では、設定で有効にします。

[2] 34 では、設定で有効にします。

[3] 28 では、設定で有効にします。

関連項目

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

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