Fetch API の Response
インターフェイスは、リクエストのレスポンスを表します。
Response.Response()
コンストラクタを使い、新しい Response オブジェクトを作ることができます。しかし、ServiceWorker の Fetchevent.respondWith
や GlobalFetch.fetch()
などのように、他のAPIからResponseオブジェクトが返されるのをより頻繁に目にするでしょう。
コンストラクタ
Response()
- 新しい
Response
オブジェクトを返します。
プロパティ
Response.headers
読取専用- レスポンスに関連した
Headers
オブジェクトを含む。 Response.ok
読取専用- レスポンスが成功(200-299 の範囲のステータス)したか否かを通知する boolean 値を含む。
Response.redirected
読取専用- レスポンスがリダイレクトの結果であるかどうかを示します。 つまり、その URL リストには複数のエントリーがあります。
Response.status
読取専用- HTTPステータスコードを返す。(例:200 成功)
Response.statusText
読取専用- ステータスコードに対応したステータスメッセージを含む(たとえば、200 で OK)。
Response.type
読取専用- レスポンスのタイプを示す。(例:basic,cors)
Response.url
読取専用- レスポンスのURLを返す。
Response.useFinalURL
- レスポンスの最後の URL かどうかを通知する boolean 値を含む。
Response
は Body
を実装しているため、次のプロパティも使用可能です:
Body.body
読取専用- コンテンツのボディを示す
ReadableStream
の単純なゲッターです。 Body.bodyUsed
読取専用- レスポンスで body が既に使用されているかどうかを示す
Boolean
値を保持する。
メソッド
Response.clone()
Response
オブジェクトのクローンを生成する。Response.error()
- ネットワークエラーに関連した新しい
Response
オブジェクトを返す。 Response.redirect()
- 異なる URL で新しい response を生成する
Response
は Body
を実装しているため、次のメソッドも使用可能です:
Body.arrayBuffer()
Response
ストリームを取得し、それを完全に読み込む。これは、ArrayBuffer
で解決する promise を返す。Body.blob()
Response
ストリームを取得し、それを完全に読み込む。これは、Blob
で解決する promise を返す。Body.formData()
Response
ストリームを取得し、それを完全に読み込む。これは、FormData
オブジェクトで解決する promise を返す。Body.json()
Response
ストリームを取得し、それを完全に読み込む。これは、JSON
オブジェクトで解決する promise を返す。Body.text()
Response
ストリームを取得し、それを完全に読み込む。これは、USVString
(text)で解決する promise を返す。
例
basic fetch example (run example live) では image を取得するために単純な fetch()
を使用し、それを <img>
タグの中に入れて表示しています。fetch()
はプロミスを返し、then の引数として Response オブジェクトを渡します。image をリクエストするとき、レスポンスに正しい MIME タイプを設定するために、Body.blob
(Response
は body を実装しています)を実行する必要があることに注意してください。
var myImage = document.querySelector('.my-image');
fetch('flowers.jpg').then(function(response) {
return response.blob();
}).then(function(blob) {
var objectURL = URL.createObjectURL(blob);
myImage.src = objectURL;
});
カスタム Response
オブジェクトを生成するために、Response.Response()
コンストラクタを使用することもできます:
var myResponse = new Response();
仕様
仕様 | 状態 | コメント |
---|---|---|
Fetch Response の定義 |
現行の標準 | Initial definition |
ブラウザー実装状況
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.