Request

Fetch API の Request インターフェイスは、リソースのリクエストを表します。

Request.Request() コンストラクタを使用することで、新しい Request オブジェクトを生成できますが、service worker の FetchEvent.request のような別の API 操作の結果として返される Request オブジェクトに遭遇することの方が多いでしょう。

コンストラクタ

Request.Request()

新しい Request オブジェクトを生成する。

プロパティ

Request.method 読取専用

リクエストメソッド（GET、POST など）を含む。

Request.url 読取専用

リクエストの URL を含む。

Request.headers 読取専用

リクエストの Headers に関連したオブジェクトを含む。

Request.context 読取専用  

リクエストのコンテクスト（たとえば、audio、image、iframe など）を含む。

Request.referrer 読取専用

リクエストのリファラ（ たとえば、client）を含む。

Request.referrerPolicy 読取専用

リファラに関するポリシー（例えば no-referrer）を含む。

Request.mode 読取専用

リクエストのモード（ たとえば、cors、no-cors、same-origin、navigate）を含む。

Request.credentials 読取専用

リクエストのクレデンシャル（ たとえば、omit、same-origin）を含む。

Request.redirect 読取専用

リダイレクトの処理方法のためのモードを含む。follow、error、manual のいずれかである。

Request.integrity 読取専用

リクエストの subresource integrity 値（ たとえば、sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）を含む。

Request.cache 読取専用

リクエストのキャッシュモード（たとえば、default、reload、no-cache）を含む。

Request は、Body を実装しているため、次のプロパティも利用可能です：

Body.body 読取専用

body コンテンツの ReadableStream として晒すのに使うシンプルなゲッター。

Body.bodyUsed 読取専用

response でボディが使われたかどうかを示す Boolean 値を保持する。

メソッド

Request.clone()

現在の Request オブジェクトのコピーを生成する。

Request は Body を実装しているため、次のメソッドも利用可能です：

Body.arrayBuffer()

リクエスト本体を表す ArrayBuffer が解決される Promise が返る。

Body.blob()

リクエスト本体を表す Blob が解決される Promise が返る。

Body.formData()

リクエスト本体を表す FormData が解決される Promise が返る。

Body.json()

リクエスト本体を表す JSON が解決される Promise が返る。

Body.text()

リクエスト本体を表す USVString が解決される Promise が返る。

例

次のスニペットでは、Request() コンストラクタを使用して （スクリプトと同じディレクトリーにある画像ファイルのために） 新しい request を生成し、いくつかリクエストのプロパティ値を返しています：

const myRequest = new Request('http://localhost/flowers.jpg');

const myURL = myRequest.url; // http://localhost/flowers.jpg
const myMethod = myRequest.method; // GET
const myCred = myRequest.credentials; // omit

次に、GlobalFetch.fetch() の呼び出しパラメータとして Request オブジェクトを渡すことにで、このリクエストを取得できます。たとえば：

fetch(myRequest)
  .then(response => response.blob())
  .then(blob => {
    myImage.src = URL.createObjectURL(blob);
  });

次のスニペットでは、初期化データとbodyコンテンツつきの Request() コンストラクタを使用して、bodyペイロードを必要とするAPIリクエストのための新しい request を生成します:

const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'});
 
const myURL = myRequest.url; // http://localhost/api
const myMethod = myRequest.method; // POST
const myCred = myRequest.credentials; // omit
const bodyUsed = myRequest.bodyUsed; // true

するとRequest オブジェクトを、例えば GlobalFetch.fetch() 呼び出しの引数として渡すことでAPIリクエストを取得できて、レスポンスを取得できます:

fetch(myRequest)
  .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);
  });

仕様

ブラウザー実装状況

関連項目

• ServiceWorker API
• HTTP access control (CORS)
• HTTP