プロのように Javascript でデータを取得する方法

fetch API を使用すると HTTP リクエストを作成できるため、API からデータを取得したり、サーバーにデータを送信したり、Web ページのコンテンツ全体を取得したりするなど、 Javascriptでさまざまなことを実行できます。この HTTP リクエストは、提供された URL から非同期的にデータを取得し、ある種の HTTP レスポンスを生成します。それがどのように機能するかを見てみましょう。

fetch()関数はグローバル関数であり、API との対話に最も頻繁に使用されます。初めての場合は、一人ではありません。それでは、 fetch()がどのように機能するかを見てみましょう。

JavaScript でフェッチを使用する

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 つの非常に一般的な例を見てみましょう。

例 1: Javascript fetch を使用して Web サイトの HTML コンテンツを取得する

前述のように、 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が返されます。

例 2: Javascript Fetch を介して JSON を取得する

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

JavaScript フェッチのオプション

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にすることができます。

JavaScript フェッチは非同期であることを忘れないでください

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 を使用して Javascript でフェッチを待機する

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を使用する必要があります。

Javascript で 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 の信じられないほど強力なツールであり、常に大きな製品で頻繁に使用されています。この記事を楽しんでいただけたでしょうか。