JavaScript Fetch API を使用してデータを取得するにはどうすればよいですか?

現在、JavaScript はフロントエンドおよびバックエンドのコードを作成するのに非常に便利です。さらに、最も広く使用されているプログラミング言語でもあります。

また、リアルタイム アプリケーションを開発する場合は、他のサーバーからデータを取得する必要があります。 API (アプリケーション プログラミング インターフェイス) を使用して、他のサーバーやデータベースからデータを取得できます。

ここでは、JavaScript を使用してデータを取得するさまざまな方法を学びます。

fetch()メソッドを使用する

fetch() は、ブラウザが API からデータを取得するために使用するメソッドです。データを取得する必要がある最初のパラメーターとして API URL を受け取り、2 番目のパラメーターとしてオプションを受け取ります。これらのオプションには、ヘッダーと認証トークンを含めることができます。

＃＃＃文法＃＃＃

ユーザーは次の構文を使用して fetch() を使用してデータを取得できます。

リーリー

上記の構文において、baseURL はデータを取得するための API です。

例 1

以下の例では、ユーザーがボタンをクリックすると、 fetchData() 関数が実行されます。 fetchData() 関数では、 fetch() メソッドを使用して API からデータを取得します。その後、応答とエラーを処理しました。ユーザーは、API から取得したデータを出力で確認できます。

リーリー

axios npm パッケージの使用

axios は、開発者が GET、POST、PUT などのリクエストを行うことで API と対話できるようにする NPM パッケージです。ここでは、axios を使用して GET リクエストを実行し、JavaScript でデータを取得します。

＃＃＃文法＃＃＃

ユーザーは axios を使用して、次の構文に従って API からデータを取得できます。

リーリー

上記の構文では、axios.get() メソッドを使用して API からデータを取得します。

例 2

この例では、サーバーまたはデータベースから取得した then() ブロックと catch() ブロックを使用して Promise を解決します。 then() ブロックのデータと catch() ブロックのエラーを利用します。

リーリー

例 3

次の例では、axios を使用して、async/await 構文を通じてデータを取得します。 getData() 関数を非同期にしました。さらに、axios で await キーワードを使用して、API から応答を受け取るまで関数の実行を一時停止しました。

リーリー

XMLHttpRequest Web API の使用

XMLHttpRequest Web API を使用すると、データを取得するモジュールを作成できます。 XMLHttpRequest を使用してオブジェクトを作成し、初期化できます。次に、このオブジェクトを使用して GET リクエストを開くことができます。

その後、XMLHttpRequest がロードされたときにコールバック関数を呼び出すことができます。コールバック関数は応答ステータスを取得し、それに応じて応答またはエラーを返すことができます。

＃＃＃文法＃＃＃ リーリー

上記の構文では、まず open() メソッドを使用してリクエストを開き、次に onload イベントを使用して API からの応答を処理します。

例 4

次の例では、XMLHttpRequest() Web API を使用してカスタム モジュールを作成し、API からデータを取得する必要があります。 CustomRequest() 関数にはカスタム モジュールが含まれています。

その後、URL をパラメータとして渡してcustomRequest() 関数を呼び出し、then() ブロックを使用してcustomRequest() 関数から返された Promise を解決します。

リーリー

API からデータを取得する 3 つの異なる方法を学びました。最良の方法は、ブラウザの fetch() メソッドを使用することです。これを使用するためにモジュールをインストールする必要はありません。さらに、ユーザーはすべてのモジュールを async/await 構文で使用する必要があります。

以上がJavaScript Fetch API を使用してデータを取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。