Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/ja/docs/Web/API/Window/fetch below:

Window: fetch() メソッド - Web API

Baseline Widely available *

fetch() は Window インターフェイスのメソッドで、ネットワークからリソースを取得するプロセスを開始し、レスポンスが利用できるようになったら履行されるプロミスを返します。

このプロミスは、そのリクエストに対するレスポンスを表す Response で解決します。

fetch() のプロミスは、ネットワークエラーが発生した場合（普通は権限の問題があったときなど）のみ拒否されます。 fetch() のプロミスは、サーバーがエラーを示す HTTP ステータスコード（404、504 など）を返しても拒否されません。 代わりに、 then() ハンドラーで Response.ok や Response.status プロパティをチェックする必要があります。

fetch() メソッドは取得するリソースのディレクティブではなく、コンテンツセキュリティポリシーの connect-src ディレクティブによって制御されます。

メモ: fetch() メソッドの引数は Request() コンストラクターと全く同じです。

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 によって特別に禁止されており、そして fetch() リクエストが browsingTopics: true で行われたときに発生します。

TypeError

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

// "C ontent-Type" に空白がある
const headers = {
  'C ontent-Type': 'text/xml',
  'Breaking-Bad': '<3',
};
fetch('https://example.com/', { headers });
        

const headers = [
  ['Content-Type', 'text/html', 'extra'],
  ['Accept'],
];
fetch('https://example.com/', { headers });
        

fetch('blob://example.com/', { mode: 'cors' });
        

fetch('https://user:password@example.com/');
        

fetch('https://example.com/', { referrer: './abc\u0000df' });
        

fetch('https://example.com/', { mode: 'navigate' });
        

fetch('https://example.com/', {
  cache: 'only-if-cached',
  mode: 'no-cors',
});
        

fetch('https://example.com/', { method: 'CONNECT' });
        

fetch('https://example.com/', {
  method: 'CONNECT',
  mode: 'no-cors',
});
        

fetch('https://example.com/', {
  method: 'GET',
  body: new FormData(),
});
        

Fetch Request の例（Fetch Request のライブ版を参照）では、 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);

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4