Window: fetch() メソッド

構文

fetch(resource)
fetch(resource, options)

引数

resource

取得したいリソースを定義します。以下のどちらかが使用できます。

• 文字列または文字列化できるその他のオブジェクト（URL オブジェクトを含む）。取得したいリソースの直接の URL を含む文字列です。この URL は、文書内の baseURI、ワーカーコンテキストでは WorkerGlobalScope.location となります。
• Request オブジェクト。

options 省略可

リクエストに適用する独自の設定を含む RequestInit オブジェクトです。

返値

Promise で、 Response オブジェクトに解決します。

例外

AbortError DOMException

AbortController の abort() メソッドの呼び出しによりリクエストが中止された。

NotAllowedError DOMException

次の場合に発生します。

• トピック API を使用することが、権限ポリシーの browsing-topics によって特別に禁止されており、browsingTopics が true に設定されていたとき。
• プライベートステートトークン API の操作は、仕様上、private-state-token-issuance または private-state-token-redemption を含む権限ポリシーによって明示的に禁止されており、かつ privateToken オプションが指定され、その中に許可されていない privateToken.operation の種類が含まれている場合です。

TypeError

以下の理由で発生する可能性があります。

• リクエストされた URL が無効である。
• リクエストされた URL に資格情報（ユーザー名とパスワード）が含まれている。
• options の値として渡された RequestInit オブジェクトに、無効な値を持つプロパティが含まれている。
• リクエストが権限ポリシーによってブロックされている。
• ネットワークエラーが発生している（例えば、端末がネットワークに接続していないため）。
• privateToken 初期化オプションが指定されており、privateToken.operation の種類が send-redemption-record であるにもかかわらず、privateToken.issues 配列が空であるか設定されていないか、または指定された issuers のうち 1 つ以上が信頼できない HTTPS URL であるため。

例

フェッチリクエストの例（フェッチリクエストのライブ版を参照）では、 Request オブジェクトを関連するコンストラクターで作成しています。 その後で fetch() を呼び出して取得しています。 画像を読み取っているため、レスポンスで Response.blob() を実行して正しい MIME タイプを指定して正しく扱われるようにし、オブジェクト URL を作成して <img> 要素に追加して表示させています。

const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

window
  .fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

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

Fetch Request with init の例（Fetch Request init のライブ版）では上記の内容に加えて、fetch() を呼び出すとき、初期化オブジェクト init を渡しています。 この場合、Cache-Control 値を設定することで、どのようなキャッシュレスポンスであれば問題ないかを示すことができます。

const myImage = document.querySelector("img");
const reqHeaders = new Headers();

// キャッシュされたレスポンスは、それが 1 週間以上前のものでなければ問題ない
reqHeaders.set("Cache-Control", "max-age=604800");

const options = {
  headers: reqHeaders,
};

// init をヘッダーと一緒に "options" オブジェクトとして渡す
const req = new Request("flowers.jpg", options);

fetch(req).then((response) => {
  // …
});

同様に init オブジェクトを Request コンストラクターに渡しても、同じ効果が得られます。

const req = new Request("flowers.jpg", options);

init の headers でオブジェクトリテラルを使用することもできます。

const options = {
  headers: {
    "Cache-Control": "max-age=60480",
  },
};

const req = new Request("flowers.jpg", options);

「fetch の使用方法」の記事では、fetch() の使用例をさらに詳しく提供しています。

仕様書

ブラウザーの互換性

関連情報

• WorkerGlobalScope.fetch()
• フェッチ API
• サービスワーカー API
• HTTP アクセス制御 (CORS)
• HTTP