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 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 インストール 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 は現在ではあまり使用されていませんが、古いプロジェクトでは依然として使用されています。

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