JavaScript で API を使用してデータを取得します。

Web アプリケーションを構築する場合、HTTP リクエストの作成は一般的なタスクです。 JavaScript でこれを行うにはいくつかの方法があり、それぞれに独自の利点と使用例があります。この投稿では、fetch()、axios()、$.ajax()、および XMLHttpRequest() の 4 つの一般的なメソッドについて、それぞれの簡単な例を示しながら説明します。

1. fetch()
の使用 fetch() 関数を使用すると、HTTP にリクエストしてネットワークからリソースを取得できます。 Promise を使用するため、非同期操作の処理が容易になります。

例

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

2. Axios() の使用
axios() は、ブラウザまたは Node.jsapplications からリクエストを行うための一般的な HTTP クライアントです。これは組み込みの fetch() API に似ていますが、リクエストとレスポンスのインターセプター、自動 JSON 解析などの追加機能が含まれています。

例

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

3. $.ajax()
の使用 jQuery を使用している場合は、$.ajax() 関数を使用して HTTP リクエストを行うことができます。 AJAX リクエストを作成し、レスポンスを処理するためのシンプルなインターフェイスを提供します。

例

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error('Error:', error);
  }
});

4. XMLHttpRequest() の使用
XMLHttpRequest オブジェクトを使用すると、ページを更新せずに URL からデータをフェッチする簡単な方法が提供されます。 fetch() や Axios などのライブラリよりも少し低レベルですが、依然として多くのアプリケーションで広く使用されています。

例

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('Request failed');
};
xhr.send();

この例では、新しい XMLHttpRequest を作成し、GET リクエストを開き、ステータス コードを確認して応答テキストを解析することで応答を処理します。

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