Request
Request
は Fetch API のインターフェイスで、リソースのリクエストを表します。
新しい Request
オブジェクトは Request()
コンストラクターを用いて生成することができますが、 Request
オブジェクトは他の API 操作、例えばサービスワーカーの FetchEvent.request
などの結果として返されたものに遭遇することの方が多いでしょう。
コンストラクター
Request()
- 新しい
Request
オブジェクトを生成します。
プロパティ
Request.body
(en-US) 読取専用- body の中身を
ReadableStream
として取り出すために使用されるシンプルなゲッターです。 Request.bodyUsed
(en-US) 読取専用true
またはfalse
で、レスポンス中で本文が既に使用されたかどうかを示します。Request.cache
読取専用- リクエストのキャッシュモード (
default
,reload
,no-cache
など) が入ります。 Request.credentials
読取専用- リクエストの認証情報 (
omit
,same-origin
,include
など) が入ります。既定値はsame-origin
です。 Request.destination
(en-US) 読取専用- 文字列で、リクエストの方向を示します。これはその種類のコンテンツがリクエストされることを示す文字列です。
Request.headers
読取専用- リクエストに関連付けられた
Headers
オブジェクトが入ります。 Request.integrity
読取専用- リクエストの subresource integrity 値 (例えば
sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=
) が入ります。 Request.method
読取専用- リクエストメソッド (
GET
,POST
など) が入ります。 Request.mode
読取専用- リクエストのモード (
cors
,no-cors
,same-origin
,navigate
など) が入ります。 Request.redirect
読取専用- リダイレクトをどう扱うかのモードが入ります。
follow
,error
,manual
のいずれかです。 Request.referrer
読取専用- リクエストのリファラー (
client
など) が入ります。 Request.referrerPolicy
(en-US) 読取専用- リファラに関するポリシー (
no-referrer
など) が入ります。 Request.url
読取専用- リクエストの URL が入ります。
メソッド
Request.arrayBuffer()
(en-US)- リクエスト本体を表す
ArrayBuffer
で解決するプロミスを返します。 Request.blob()
(en-US)- リクエスト本体を表す
Blob
で解決するプロミスを返します。 Request.clone()
- 現在の
Request
オブジェクトのコピーを生成します。 Request.formData()
(en-US)- リクエスト本体を表す
FormData
で解決するプロミスを返します。 Request.json()
(en-US)- リクエスト本体を表す
JSON
で解決するプロミスを返します。 Request.text()
(en-US)- リクエスト本体を表す
USVString
(テキスト) で解決するプロミスを返します。
メモ: リクエスト本文の関数は 1 度しか呼び出せません。 2 回目以降は空の文字列または ArrayBuffer で解決します。
例
次のスニペットでは、Request()
コンストラクターを使用して (スクリプトと同じディレクトリーにある画像ファイルのために) 新しい request を生成し、いくつかリクエストのプロパティ値を返しています。
const request = new Request('https://www.mozilla.org/favicon.ico');
const url = request.url;
const method = request.method;
const credentials = request.credentials;
このリクエストは、下記のように Request
オブジェクトを引数として WindowOrWorkerGlobalScope.fetch()
に渡すことで読み取ることができます。
fetch(request)
.then(response => response.blob())
.then(blob => {
image.src = URL.createObjectURL(blob);
});
以下のスニペットでは、 Request()
コンストラクターにいくつかの初期化データと本文コンテンツを付けて、本文ペイロードを必要とする API リクエストのための新しいリクエストを生成します。
const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});
const url = request.url;
const method = request.method;
const credentials = request.credentials;
const bodyUsed = request.bodyUsed;
メモ: body の型は Blob
, BufferSource
, FormData
, URLSearchParams
, USVString
ReadableStream
のいずれかで、ペイロードにそのオブジェクトを文字列化するのに必要な JSON オブジェクトでも同様です。
すると Request
オブジェクトを、例えば WindowOrWorkerGlobalScope.fetch()
呼び出しの引数として渡すことで API リクエストを取得できて、レスポンスを取得できます。
fetch(request)
.then(response => {
if (response.status === 200) {
return response.json();
} else {
throw new Error('Something went wrong on api server!');
}
})
.then(response => {
console.debug(response);
// ...
}).catch(error => {
console.error(error);
});
仕様書
Specification |
---|
Fetch Standard # request-class |
ブラウザーの互換性
BCD tables only load in the browser