この記事は編集レビューを必要としています。ぜひご協力ください。
これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
Body ミックスインの text() メソッドは、Response ストリームを取得して、それを完全に読み取ります。その上で、USVString オブジェクト(text)で解決する promise を返します。
構文
response.text().then(function (text) {
// text レスポンスを使用して何か実行する。
});
パラメーター
なし。
戻り値
USVString で解決する promise。
例
fetch text example(fetch 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 では、設定で有効にします。