Request
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
* Some parts of this feature may have varying levels of support.
メモ: この機能はウェブワーカー内で利用可能です。
Request はフェッチ API のインターフェイスで、リソースのリクエストを表します。
新しい Request オブジェクトは Request() コンストラクターを用いて生成することができますが、 Request オブジェクトは他の API 操作、例えばサービスワーカーの FetchEvent.request などの結果として返されたものに遭遇することの方が多いでしょう。
コンストラクター
Request()-
新しい
Requestオブジェクトを生成します。
プロパティ
Request.body読取専用-
本体の中身の
ReadableStreamです。 Request.bodyUsed読取専用-
trueまたはfalseで、レスポンス中で本体が既に使用されたかどうかを示します。 Request.cache読取専用-
リクエストのキャッシュモード (
default,reload,no-cacheなど) が入ります。 Request.credentials読取専用-
リクエストの認証情報 (
omit,same-origin,includeなど) が入ります。既定値はsame-originです。 Request.destination読取専用-
文字列で、リクエストされたコンテンツの型を表します。
Request.headers読取専用-
リクエストに関連付けられた
Headersオブジェクトが入ります。 Request.integrity読取専用-
リクエストのサブリソース完全性の値を保持します（
sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=など）。 -
論理値で、このリクエストが履歴のナビゲーションであるかどうかを示します。
Request.keepalive読取専用-
リクエストの
keepalive設定（trueまたはfalse）が入ります。これは、リクエストが完全に完了する前に開始ページが読み込まれなかった場合に、ブラウザーが関連付けられたリクエストを維持するかどうかを示します。 Request.method読取専用-
リクエストメソッド (
GET,POSTなど) を保持します。 Request.mode読取専用-
リクエストのモード (
cors,no-cors,same-origin,navigateなど) を保持します。 Request.redirect読取専用-
リダイレクトをどう扱うかのモードが入ります。
follow,error,manualのいずれかです。 Request.referrer読取専用-
このリクエストのリファラー (
clientなど) が入ります。 Request.referrerPolicy読取専用-
リファラに関するポリシー (
no-referrerなど) が入ります。 Request.signal読取専用-
リクエストに関連付けられた
AbortSignalを返します。 Request.url読取専用-
リクエストの URL が入ります。
メソッド
Request.arrayBuffer()-
リクエストの本体の
ArrayBuffer表現で解決するプロミスを返します。 Request.blob()-
リクエストの本体の
Blob表現で解決するプロミスを返します。 Request.bytes()-
リクエスト本体の
Uint8Array表現で解決するプロミスを返します。 Request.clone()-
現在の
Requestオブジェクトのコピーを生成します。 Request.formData()-
リクエストの本体の
FormData表現で解決するプロミスを返します。 Request.json()-
リクエストの本体を
JSONで解釈した結果で解決するプロミスを返します。 Request.text()-
リクエストの本体のテキスト表現で解決するプロミスを返します。
メモ: リクエスト本体の機能は一度しか実行することができません。それ以降の呼び出しは、TypeError で拒否され、本体ストリームがすでに使用されていることを示すエラーが表示されます。
例
次のスニペットでは、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 オブジェクトを引数として 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, ArrayBuffer, TypedArray, DataView, FormData, URLSearchParams, ReadableStream, String オブジェクトのいずれか、および文字列リテラルのみですので、 JSON オブジェクトを本体に追加するには、そのオブジェクトの文字列化をする必要があります。
すると Request オブジェクトを、例えば fetch() 呼び出しの引数として渡すことで API リクエストを取得できて、レスポンスを取得できます。
fetch(request)
.then((response) => {
if (response.status === 200) {
return response.json();
} else {
throw new Error("API サーバーで問題が発生しました。");
}
})
.then((response) => {
console.debug(response);
// …
})
.catch((error) => {
console.error(error);
});
仕様書
| Specification |
|---|
| Fetch # request-class |