API を使用すると HTTP リクエストを作成できるため、API からデータを取得したり、サーバーにデータを送信したり、Web ページのコンテンツ全体を取得したりするなど、 でさまざまなことを実行できます。この HTTP リクエストは、提供された URL から非同期的にデータを取得し、ある種の HTTP レスポンスを生成します。それがどのように機能するかを見てみましょう。 fetch Javascript 関数はグローバル関数であり、API との対話に最も頻繁に使用されます。初めての場合は、一人ではありません。それでは、 がどのように機能するかを見てみましょう。 fetch() fetch() JavaScript でフェッチを使用する fetch の最も基本的な使い方は、1 つの引数 (取得したい URL) を取ります。 は HTTP リクエストを生成するため、常に URL を提供する必要があります。 fetch let fetchExample = fetch("https://fjolt.com").then((res) => { // Do something with res }); フェッチの結果は非同期であるため を使用して応答をキャッチし、それを処理できます。返された または response の優れた点は、組み込みのメソッドが多数あることです。これにより、 から取得したコンテンツをすぐに解析できます。 then() res fetch - URL のテキスト コンテンツを返します。 Web サイトの場合は、HTML を返します。 res.text() - 存在する場合は、フォーマットされた JSON データを返します。 res.json() - 存在する場合、Blob データを返します。 res.blob() - 存在する場合、arrayBuffer データを返します。 res.arrayBuffer() - 存在する場合、formData データを返します。 res.formData() 異なる URL は異なるタイプのコンテンツを生成するため、上記のメソッドを使用すると、そのコンテンツを任意の方法で解析できます。すべてがどのように機能するかを理解するために、2 つの非常に一般的な例を見てみましょう。 例 1: Javascript fetch を使用して Web サイトの HTML コンテンツを取得する 前述のように、 は URL のテキスト コンテンツを提供するため、これを使用して URL の HTML コンテンツ全体を取得できます。 を使用して応答をキャッチしたら、別の で応答をキャッチして、提供された URL のコンテンツをダウンロードして返すことができます。 res.text() res.text() then 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 で構成されている場合、 を使用できます。たとえば、次のコードは、URL が有効な JSON を送り返していると仮定して、URL から JSON オブジェクトを返します。 res.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 の後に続きます — つまり です。以前に HTTP 要求を扱ったことがある場合は、なじみのあるものがあるかもしれません。以下に表示される 関数には、使用可能なすべての可能なオプションが含まれています。 fetch(URL, { options }) 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' }); そして、それぞれの意味をまとめると次のようになります。 には、テキストの本文が含まれます。この例では、文字列化する必要がある JSON を送信しています。 body は標準の HTTP メソッドです。 / / / / / / / です。 method POST GET DELETE PUT CONNECT PATCH TRACE OPTIONS は、クロス オリジン リクエストが受け入れられるかどうかを示します。 / / にすることができます。 mode cors no-cors same-origin とは、ブラウザがキャッシュと対話する方法を指します。 / / / / にすることができます。 cache default no-cache reload force-cache only-if-cached は、クロス オリジン Cookie をリクエストと共に送信する必要があるかどうかを示します。 / / が可能です。 credentials include same-origin omit には、リクエストに関連付けられたヘッダーが含まれます。任意の HTTP ヘッダーを含めることができます (たとえば、ここでは を示しています) が、カスタム HTTP ヘッダーも含めることができます。 headers Content-Type は、取得した URL がリダイレクトされた場合にどうなるかを決定します。 / / のいずれかです。 redirect 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 にアクセスして情報を収集し、 を返します。 URL の読み込み、ダウンロード、および元に戻すには時間がかかるため、これは即時ではありません。単純に fetch を単独で実行すると、その直後のコンソール ログは、目的の URL からの ではなく、 のみを返します。 response response Promise let apiResponse = fetch("https://fjolt.com/api"); console.log(apiResponse); // Returns Promise<Pending> これは、 関数が実行されているために発生しますが、Javascript は を待機しません。そのため、 にアクセスしたい場合は、Javascript にそれを待つように明示的に指示する必要があります。 fetch() response response を待つ方法は 2 つあります。 fetch() を使用して、 の応答を操作できます。 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 つの方法は、 キーワードを使用することです。最新のブラウザーのほとんど サポートしていますが、サポートが心配な場合、または 14.8 より前のバージョンの Node.JS を使用している場合は、 内に コードをラップすることをお勧めします。 await はトップ レベルの awaits を 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 に関するこちらのチュートリアルをお読みください 結論 このガイドでは、フェッチがどのように機能するかを説明しました。 リクエストで送信できるさまざまなオプションと、Javascript で非同期の概念を使用して応答を待つ方法を示しました。 は Javascript の信じられないほど強力なツールであり、常に大きな製品で頻繁に使用されています。この記事を楽しんでいただけたでしょうか。 fetch() fetch()

BUNCH

Fetch

Trace

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

 Add passwordless user experiences to your app

HackerNoon Mobile

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

長すぎる; 読むには

Companies Mentioned

@smpnjn

関連ストーリー