Heim > Web-Frontend > js-Tutorial > Hauptteil

Haben Sie alle API-Aufrufe in JavaScript ausprobiert? Hier sind Möglichkeiten, dies zu tun

PHPz
Freigeben: 2024-07-18 08:03:09
Original
506 Leute haben es durchsucht

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

API-Aufrufe sind ein wichtiger Bestandteil der modernen Webentwicklung. JavaScript bietet mehrere Möglichkeiten, diese Aufgabe zu erfüllen, jede mit ihren eigenen Vor- und Nachteilen. In diesem Artikel werden Ihnen vier Hauptmethoden zum Durchführen von API-Aufrufen in JavaScript vorgestellt, die Sie in Ihren Projekten verwenden können.

XMLHttpRequest (XHR)

XMLHttpRequest (XHR) ist eine traditionelle Methode zum Aufrufen von APIs, die in allen Browserversionen unterstützt wird. Diese Methode ist zuverlässig und weit verbreitet, obwohl ihre Syntax manchmal schwieriger zu lesen und zu warten ist.

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();
Nach dem Login kopieren

API abrufen

Fetch API ist eine modernere und einfachere Möglichkeit, API-Aufrufe basierend auf Versprechen durchzuführen. Es unterstützt asynchrone Vorgänge und lässt sich mithilfe von Async und Wait einfach erweitern.

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
Nach dem Login kopieren

Verwenden von Async und Wait.

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();
Nach dem Login kopieren

Axios

Axios ist eine beliebte Bibliothek für HTTP-Anfragen, die eine einfache und konsistente Schnittstelle für API-Aufrufe bietet. Es muss zuerst mit npm oder Yarn installiert werden.
npm install axios
oder
Garn Axios hinzufügen

Dann können Sie Axios für API-Aufrufe verwenden:

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
    });
Nach dem Login kopieren

Asynchron verwenden und warten:

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();
Nach dem Login kopieren

jQuery AJAX

jQuery AJAX ist eine Methode zum Durchführen von API-Aufrufen mithilfe der jQuery-Bibliothek. Obwohl jQuery heutzutage weniger häufig verwendet wird, kommt es immer noch in älteren Projekten vor.

<!-- 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>
Nach dem Login kopieren

Quellenfoto:
RAKOZY, Greg. Bücher zum Website-Design. Online. In: Unsplash. 2016. Verfügbar unter: https://unsplash.com/photos/html-css-book-vw3Ahg4x1tY. [zit. 2024-07-16].

Das obige ist der detaillierte Inhalt vonHaben Sie alle API-Aufrufe in JavaScript ausprobiert? Hier sind Möglichkeiten, dies zu tun. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!