Abrufen von Daten mithilfe der API in JavaScript.

Beim Erstellen von Webanwendungen ist das Senden von HTTP-Anfragen eine häufige Aufgabe. In JavaScript gibt es mehrere Möglichkeiten, dies zu tun, jede mit ihren eigenen Vorteilen und Anwendungsfällen. In diesem Beitrag werden wir vier beliebte Methoden untersuchen: fetch(), axios(), $.ajax() und XMLHttpRequest(), mit einfachen Beispielen für jede.

1. Mit fetch()
Mit der Funktion fetch() können Sie HTTP anfordern, Ressourcen aus einem Netzwerk abzurufen. Es verwendet Versprechen, was die Handhabung asynchroner Vorgänge erleichtert.

Beispiel

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

2. Verwenden von Axios()
axios() ist ein beliebter HTTP-Client zum Senden von Anfragen von Browsern oder Node.js-Anwendungen. Es ähnelt der integrierten fetch()-API, enthält jedoch zusätzliche Funktionen wie Anforderungs- und Antwort-Interceptors, automatisches JSON-Parsing und mehr.

Beispiel

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

3. Verwendung von $.ajax()
Wenn Sie mit jQuery arbeiten, können Sie die Funktion $.ajax() verwenden, um HTTP-Anfragen zu stellen. Es bietet eine einfache Schnittstelle zum Stellen von AJAX-Anfragen und zum Verarbeiten von Antworten.

Beispiel

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error('Error:', error);
  }
});

4. Verwenden von XMLHttpRequest()
Das XMLHttpRequest-Objekt bietet eine einfache Möglichkeit, Daten von einer URL abzurufen, ohne dass eine Seitenaktualisierung erforderlich ist. Es ist etwas niedriger als fetch() oder Bibliotheken wie Axios, wird aber immer noch in vielen Anwendungen häufig verwendet.

Beispiel

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('Request failed');
};
xhr.send();

In diesem Beispiel erstellen wir eine neue XMLHttpRequest, öffnen eine GET-Anfrage und verarbeiten die Antwort, indem wir den Statuscode überprüfen und den Antworttext analysieren.

Das obige ist der detaillierte Inhalt vonAbrufen von Daten mithilfe der API in JavaScript.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!