Maison > interface Web > js tutoriel > Avez-vous essayé tous les appels API en JavaScript ? Voici les moyens de le faire

Avez-vous essayé tous les appels API en JavaScript ? Voici les moyens de le faire

PHPz
Libérer: 2024-07-18 08:03:09
original
541 Les gens l'ont consulté

Have you tried all API calls in JavaScript? Here are ays to do it

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();
Copier après la connexion

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 en utilisant 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
Copier après la connexion

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();
Copier après la connexion

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
    });
Copier après la connexion

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();
Copier après la connexion

jQueryAJAX

jQuery AJAX est une méthode permettant d'effectuer des appels 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.

<!-- 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>
Copier après la connexion

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].

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal