fetch
API を使用すると HTTP リクエストを作成できるため、API からデータを取得したり、サーバーにデータを送信したり、Web ページのコンテンツ全体を取得したりするなど、 Javascriptでさまざまなことを実行できます。この HTTP リクエストは、提供された URL から非同期的にデータを取得し、ある種の HTTP レスポンスを生成します。それがどのように機能するかを見てみましょう。
fetch()
関数はグローバル関数であり、API との対話に最も頻繁に使用されます。初めての場合は、一人ではありません。それでは、 fetch()
がどのように機能するかを見てみましょう。
fetch の最も基本的な使い方は、1 つの引数 (取得したい URL) を取ります。 fetch
は HTTP リクエストを生成するため、常に URL を提供する必要があります。
let fetchExample = fetch("https://fjolt.com").then((res) => { // Do something with res });
フェッチの結果は非同期であるためthen()
を使用して応答をキャッチし、それを処理できます。返されたres
または response の優れた点は、組み込みのメソッドが多数あることです。これにより、 fetch
から取得したコンテンツをすぐに解析できます。
res.text()
- URL のテキスト コンテンツを返します。 Web サイトの場合は、HTML を返します。res.json()
- 存在する場合は、フォーマットされた JSON データを返します。res.blob()
- 存在する場合、Blob データを返します。res.arrayBuffer()
- 存在する場合、arrayBuffer データを返します。res.formData()
- 存在する場合、formData データを返します。
異なる URL は異なるタイプのコンテンツを生成するため、上記のメソッドを使用すると、そのコンテンツを任意の方法で解析できます。すべてがどのように機能するかを理解するために、2 つの非常に一般的な例を見てみましょう。
前述のように、 res.text()
は URL のテキスト コンテンツを提供するため、これを使用して URL の HTML コンテンツ全体を取得できます。 res.text()
を使用して応答をキャッチしたら、別のthen
で応答をキャッチして、提供された URL のコンテンツをダウンロードして返すことができます。
let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => { return data; }); // Now contains our website's HTML.
リンクが存在しない場合、またはエラーが発生した場合、 response
オブジェクトにエラーが含まれます。たとえば、ページが見つからない場合は404
が返され、ゲートウェイ エラーの場合は502
が返されます。
URL のコンテンツが JSON で構成されている場合、 res.json()
を使用できます。たとえば、次のコードは、URL が有効な JSON を送り返していると仮定して、URL から JSON オブジェクトを返します。
let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => { return data; }); // Now contains a JSON object - assuming one exists
fetch で使用できるオプションを理解することも重要です。オブジェクトとして URL の後に続きます — つまりfetch(URL, { options })
です。以前に HTTP 要求を扱ったことがある場合は、なじみのあるものがあるかもしれません。以下に表示されるfetch
関数には、使用可能なすべての可能なオプションが含まれています。
fetch("https://fjolt.com/", { body: JSON.stringify({ someData: "value" }) method: 'POST' mode: 'cors' cache: 'no-cache' credentials: 'same-origin' headers: { 'Content-Type': 'application/json' }, redirect: 'follow' referrerPolicy: 'no-referrer' });
そして、それぞれの意味をまとめると次のようになります。
body
には、テキストの本文が含まれます。この例では、文字列化する必要がある JSON を送信しています。method
は標準の HTTP メソッドです。 POST
/ GET
/ DELETE
/ PUT
/ CONNECT
/ PATCH
/ TRACE
/ OPTIONS
です。mode
は、クロス オリジン リクエストが受け入れられるかどうかを示します。 cors
/ no-cors
/ same-origin
にすることができます。cache
とは、ブラウザがキャッシュと対話する方法を指します。 default
/ no-cache
/ reload
/ force-cache
/ only-if-cached
にすることができます。credentials
は、クロス オリジン Cookie をリクエストと共に送信する必要があるかどうかを示します。 include
/ same-origin
/ omit
が可能です。headers
には、リクエストに関連付けられたヘッダーが含まれます。任意の HTTP ヘッダーを含めることができます (たとえば、ここではContent-Type
を示しています) が、カスタム HTTP ヘッダーも含めることができます。redirect
は、取得した URL がリダイレクトされた場合にどうなるかを決定します。 follow
/ error
/ manual
のいずれかです。referrerPolicy
は、リクエストで渡されるリファラー情報の量を決定します。 no-referrer
/ no-referrer-when-downgrade
/ origin
/ origin-when-cross-origin
/ same-origin
/ strict-origin
/ strict-origin-when-cross-origin
/ unsafe-url
にすることができます。fetch を使用すると、URL にアクセスして情報を収集し、 response
を返します。 URL の読み込み、ダウンロード、および元に戻すには時間がかかるため、これは即時ではありません。単純に fetch を単独で実行すると、その直後のコンソール ログは、目的の URL からのresponse
ではなく、 Promise
のみを返します。
let apiResponse = fetch("https://fjolt.com/api"); console.log(apiResponse); // Returns Promise<Pending>
これは、 fetch()
関数が実行されているために発生しますが、Javascript はresponse
を待機しません。そのため、 response
にアクセスしたい場合は、Javascript にそれを待つように明示的に指示する必要があります。
fetch()
を待つ方法は 2 つあります。
then
を使用して、 then()
fetch()
の応答を操作できます。await
を使用して、その内容を使用する前にフェッチが戻るのを待つことができます。then
の使用は、フェッチからの応答をキャッチして処理するためによく使用されます。 fetch()
の内容は、 then()
コールバック関数内で操作できますが、外部では操作できません。例えば:
let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => { console.log(data); // We can do anything with the data from our api here. return data; }); console.log(apiResponse); // This will return Promise<Pending> // That means we can't use the apiResponse variable // outside of the then() function.
then
の外側でfetch()
の内容を使用したい場合は、 await
を使用する必要があります。
フェッチを待つもう 1 つの方法は、 await
キーワードを使用することです。最新のブラウザーのほとんどはトップ レベルの awaits をサポートしていますが、サポートが心配な場合、または 14.8 より前のバージョンの Node.JS を使用している場合は、 async function
内にawait
コードをラップすることをお勧めします。
await を使用すると、関数またはコードの任意の場所で API からの応答を使用でき、 text()
やjson()
) などの任意のresponse
関数を使用できます。例えば:
// Typically we wrap await in an async function // But most modern browsers and Node.JS support // await statements outside of async functions now. async getAPI() { let apiResponse = await fetch("https://fjolt.com/api"); let response = apiResponse.json(); // Since we waited for our API to respond using await // The response variable will return the response from the API // And not a promise. console.log(response); } getAPI();
非同期操作について詳しく知りたい場合は、非同期 Javascript に関するこちらのチュートリアルをお読みください。
このガイドでは、フェッチがどのように機能するかを説明しました。 fetch()
リクエストで送信できるさまざまなオプションと、Javascript で非同期の概念を使用して応答を待つ方法を示しました。 fetch()
は Javascript の信じられないほど強力なツールであり、常に大きな製品で頻繁に使用されています。この記事を楽しんでいただけたでしょうか。