Les appels API sont un élément clé du développement Web moderne. JavaScript propose plusieurs façons d'accomplir cette tâche, chacune ayant ses propres avantages et inconvénients. Cet article vous présentera quatre méthodes principales pour effectuer des appels d'API en JavaScript que vous pouvez utiliser dans vos projets.

XMLHttpRequest (XHR)

XMLHttpRequest (XHR) est un moyen traditionnel d'appeler des API, pris en charge dans toutes les versions de navigateur. Cette méthode est fiable et largement utilisée, même si sa syntaxe peut parfois être plus difficile à lire et à maintenir.

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();

Récupérer l'API

Fetch API est un moyen plus moderne et plus simple d'effectuer des appels d'API, basés sur des promesses. Il prend en charge les opérations asynchrones et est facile à étendre à l'aide de async et wait.

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

Utilisation d'async et d'attente.

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

Axios est une bibliothèque populaire pour les requêtes HTTP qui fournit une interface simple et cohérente pour effectuer des appels API. Il doit d'abord être installé à l'aide de npm ou de fil.
npm installer axios
ou
fil ajouter des axios

Ensuite, vous pouvez utiliser Axios pour effectuer des appels 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
    });

Utilisation d'async et d'attente :

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();

jQueryAJAX

jQuery AJAX est une méthode permettant d'effectuer des appels d'API à l'aide de la bibliothèque jQuery. Bien que jQuery soit moins couramment utilisé aujourd'hui, il apparaît toujours dans les projets plus anciens.

Photo source :
RAKOZY, Greg. Livres de conception de sites Web. En ligne. Dans : Unsplash. 2016. Disponible sur : https://unsplash.com/photos/html-css-book-vw3Ahg4x1tY. [cit. 2024-07-16].