JavaScript verfügt über hervorragende Module und Methoden zum Erstellen von HTTP-Anforderungen, mit denen Daten von einer serverseitigen Ressource gesendet oder empfangen werden können. In diesem Artikel werden einige beliebte Methoden zum Erstellen von HTTP-Anforderungen in JavaScript vorgestellt.
Ajax
Ajax ist die traditionelle Methode zum Erstellen einer asynchronen HTTP-Anforderung. Daten können mit der HTTP-POST-Methode gesendet und mit der HTTP-GET-Methode empfangen werden. Lassen Sie uns einen Blick darauf werfen und eine GETAnfrage stellen. Ich werde JSONPlaceholder verwenden, eine kostenlose Online-REST-API für Entwickler, die zufällige Daten im JSON-Format zurückgibt.
Um einen HTTP-Aufruf in Ajax durchzuführen, müssen Sie eine neue XMLHttpRequest()Methode initialisieren , den URL-Endpunkt und die HTTP-Methode angeben (in diesem Fall GET). Schließlich verwenden wir die open()Methode, um die HTTP-Methode und den URL-Endpunkt miteinander zu verknüpfen, und rufen die send()Methode auf, um die Anforderung auszulösen.
Wir protokollieren die HTTP-Antwort an der Konsole mithilfe der XMLHTTPRequest.onreadystatechangeEigenschaft, die den Ereignishandler enthält, der beim Auslösen des Ereignisses aufgerufen werden readystatechangedsoll.
const Http = new XMLHttpRequest(); const url="//jsonplaceholder.typicode.com/posts"; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => { console.log(Http.responseText) }Wenn Sie Ihre Browserkonsole anzeigen, wird ein Datenarray im JSON-Format zurückgegeben. Aber wie würden wir wissen, ob die Anfrage erledigt ist? Mit anderen Worten, wie können wir mit Ajax mit den Antworten umgehen?
Die onreadystatechangeEigenschaft verfügt über zwei Methoden, readyStatemit statusdenen wir den Status unserer Anfrage überprüfen können.
Wenn readyStategleich 4 ist, bedeutet dies, dass die Anforderung abgeschlossen ist. Die readyStateUnterkunft verfügt über 5 Antworten. Erfahren Sie hier mehr darüber.
Abgesehen davon, dass ein Ajax-Aufruf direkt mit JavaScript ausgeführt wird, gibt es andere leistungsfähigere Methoden zum Tätigen eines HTTP-Aufrufs, z. B. $.Ajaxeine jQuery-Methode. Ich werde diese jetzt besprechen.
jQuery-Methoden
jQuery verfügt über viele Methoden, um HTTP-Anforderungen einfach zu verarbeiten. Um diese Methoden verwenden zu können, müssen Sie die jQuery-Bibliothek in Ihr Projekt aufnehmen.
$ .ajax
jQuery Ajax ist eine der einfachsten Methoden, um einen HTTP-Aufruf durchzuführen.
Die $ .ajax-Methode verwendet viele Parameter, von denen einige erforderlich und andere optional sind. Es enthält zwei Rückrufoptionen successund errorzur Behandlung der empfangenen Antwort.
$ .get Methode
Die $ .get-Methode wird verwendet, um GET-Anforderungen auszuführen. Es werden zwei Parameter benötigt: der Endpunkt und eine Rückruffunktion.
$ .post
Die $.postMethode ist eine weitere Möglichkeit, Daten auf dem Server zu veröffentlichen. Es werden drei Parameter benötigt: die url, die Daten, die Sie veröffentlichen möchten, und eine Rückruffunktion.
$ .getJSON
Die $.getJSONMethode ruft nur Daten im JSON-Format ab. Es werden zwei Parameter benötigt: die urlund eine Rückruffunktion.
jQuery verfügt über alle diese Methoden, um Daten anzufordern oder an einen Remote-Server zu senden. Sie können jedoch alle diese Methoden in einer zusammenfassen: der $.ajaxMethode, wie im folgenden Beispiel gezeigt:
holen
fetchist eine neue leistungsstarke Web-API, mit der Sie asynchrone Anforderungen stellen können. In der Tat fetchist eine der besten und meine Lieblingsmethode, um eine HTTP-Anfrage zu stellen. Es gibt ein "Versprechen" zurück, das eine der großartigen Funktionen von ES6 ist.Wenn Sie mit ES6 nicht vertraut sind, können Sie dies in diesem Artikel nachlesen. Versprechen ermöglichen es uns, die asynchrone Anfrage intelligenter zu behandeln. Werfen wir einen Blick darauf, wie fetchtechnisch funktioniert.
Die fetchFunktion benötigt einen erforderlichen Parameter: die endpointURL. Es hat auch andere optionale Parameter wie im folgenden Beispiel:
Wie Sie sehen können, fetchhat es viele Vorteile für HTTP-Anfragen. Mehr dazu erfahren Sie hier. Darüber hinaus gibt es in fetch andere Module und Plugins, mit denen wir eine Anfrage an und von der Serverseite senden und empfangen können, z. B. Axios.
Axios
Axios ist eine Open Source-Bibliothek zum Erstellen von HTTP-Anfragen und bietet viele großartige Funktionen. Schauen wir uns an, wie es funktioniert.
Verwendung:
Zuerst müssten Sie Axios einschließen. Es gibt zwei Möglichkeiten, Axios in Ihr Projekt aufzunehmen.
Erstens können Sie npm verwenden:
npm install axios --saveDann müssten Sie es importieren
import axios from 'axios'Zweitens können Sie Axios mithilfe eines CDN einschließen.
Mit axios eine Anfrage stellen:
Mit Axios können Sie Daten vom Server verwenden GETund POSTabrufen und veröffentlichen.
ERHALTEN:
axiosNimmt einen erforderlichen Parameter und kann auch einen zweiten optionalen Parameter verwenden. Dies nimmt einige Daten als einfache Abfrage.
POST:
Axios gibt ein "Versprechen" zurück. Wenn Sie mit Versprechungen vertraut sind, wissen Sie wahrscheinlich, dass ein Versprechen mehrere Anforderungen ausführen kann. Mit Axios können Sie dasselbe tun und mehrere Anforderungen gleichzeitig ausführen.
Axios unterstützt viele andere Methoden und Optionen. Sie können sie hier erkunden.
Angular HttpClient
Angular has its own HTTP module that works with Angular apps. It uses the RxJS library to handle asynchronous requests and provides many options to perform the HTTP requests.
Making a call to the server using the Angular HttpClient
To make a request using the Angular HttpClient, we have to run our code inside an Angular app. So I created one. If you’re not familiar with Angular, check out my article, learn how to create your first Angular app in 20 minutes.
The first thing we need to do is to import HttpClientModule in app.module.ts
Then, we have to create a service to handle the requests. You can easily generate a service using Angular CLI.
ng g service FetchdataServiceThen, we need to import HttpClient in fetchdataService.ts service and inject it inside the constructor.
And in app.component.ts import fetchdataService
//import import { FetchdataService } from './fetchdata.service';Finally, call the service and run it.
app.component.ts:
You can check out the demo example on Stackblitz.
Wrapping Up
We’ve just covered the most popular ways to make an HTTP call request in JavaScript.
Thank you for your time. If you like it, clap up to 50, click follow, and reach out to me on Twitter.
By the way, I’ve recently worked with a strong group of software engineers for one of my mobile applications. The organization was great, and the product was delivered very quickly, much faster than other firms and freelancers I’ve worked with, and I think I can honestly recommend them for other projects out there. Shoot me an email if you want to get in touch — [email protected].