JavaScript での API 呼び出しをすべて試しましたか?ここにそれを行う方法があります

API 呼び出しは、最新の Web 開発の重要な部分です。 JavaScript には、このタスクを実行するためのいくつかの方法が用意されていますが、それぞれに独自の長所と短所があります。この記事では、プロジェクトで使用できる JavaScript で API 呼び出しを行う 4 つの主な方法を紹介します。

XMLHttpRequest (XHR)

XMLHttpRequest (XHR) は、API を呼び出す従来の方法であり、ブラウザーのすべてのバージョンでサポートされています。このメソッドは信頼性が高く広く使用されていますが、構文の読み取りや保守が難しい場合があります。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(JSON.parse(xhr.responseText)); // Parse and log the response data
        } else {
            console.error('Error:', xhr.statusText); // Log any errors
        }
    }
};
xhr.send();

---

APIを取得する

Fetch API は、Promise に基づいて API 呼び出しを行う、より現代的で簡単な方法です。非同期操作をサポートしており、async と await を使用して簡単に拡張できます。

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

async と await を使用します。

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data); // Log the response data
    } catch (error) {
        console.error('Error:', error); // Log any errors
    }
}
fetchData();

---

アクシオス

Axios は、API 呼び出しを行うためのシンプルで一貫したインターフェイスを提供する HTTP リクエスト用の人気のあるライブラリです。最初に npm または Yarn を使用してインストールする必要があります。
npm install axios
または
糸追加 axios

これで、Axios を使用して API 呼び出しを行うことができます。

const axios = require('axios');

axios.get("https://api.example.com/data")
    .then(response => {
        console.log(response.data); // Log the response data
    })
    .catch(error => {
        console.error('Error:', error); // Log any errors
    });

非同期と待機の使用:

async function fetchData() {
    try {
        const response = await axios.get("https://api.example.com/data");
        console.log(response.data); // Log the response data
    } catch (error) {
        console.error('Error:', error); // Log any errors
    }
}
fetchData();

---

jQuery AJAX

jQuery AJAX は、jQuery ライブラリを使用して API 呼び出しを行うためのメソッドです。 jQuery は現在ではあまり使用されていませんが、古いプロジェクトでは依然として使用されています。

<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
    $.ajax({
        url: "https://api.example.com/data",
        method: "GET",
        success: function(data) {
            console.log(data); // Log the response data
        },
        error: function(error) {
            console.error('Error:', error); // Log any errors
        }
    });
});
</script>

---

出典写真:​​
ラコージー、グレッグ。ウェブサイトデザインの本。オンライン。内: アンスプラッシュ。 2016。https://unsplash.com/photos/html-css-book-vw3Ahg4x1tY から入手できます。 [引用。 2024-07-16].

以上がJavaScript での API 呼び出しをすべて試しましたか?ここにそれを行う方法がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。