JavaScript heeft geweldige modules en methoden om HTTP-verzoeken te doen die kunnen worden gebruikt om gegevens te verzenden of ontvangen van een bron aan de serverzijde. In dit artikel gaan we een paar populaire manieren bekijken om HTTP-verzoeken in JavaScript te doen.
Ajax
Ajax is de traditionele manier om een asynchroon HTTP-verzoek te doen. Gegevens kunnen worden verzonden met de HTTP POST-methode en ontvangen met de HTTP GET-methode. Laten we een kijkje nemen en een GETverzoek indienen. Ik zal JSONPlaceholder gebruiken, een gratis online REST API voor ontwikkelaars die willekeurige gegevens in JSON-indeling retourneert.
Om een HTTP-aanroep in Ajax te maken, moet u een nieuwe XMLHttpRequest()methode initialiseren , het URL-eindpunt en de HTTP-methode specificeren (in dit geval GET). Ten slotte gebruiken we de open()methode om de HTTP-methode en het URL-eindpunt aan elkaar te koppelen en de send()methode aan te roepen om het verzoek af te vuren.
We registreren de HTTP-reactie op de console met behulp van de XMLHTTPRequest.onreadystatechangeeigenschap die de gebeurtenishandler bevat die moet worden aangeroepen wanneer de readystatechangedgebeurtenis wordt geactiveerd.
const Http = new XMLHttpRequest(); const url="//jsonplaceholder.typicode.com/posts"; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => { console.log(Http.responseText) }Als u uw browserconsole bekijkt, retourneert deze een array met gegevens in JSON-indeling. Maar hoe weten we of het verzoek is gedaan? Met andere woorden, hoe kunnen we met Ajax omgaan met de reacties?
De onreadystatechangewoning beschikt over twee methoden, readyStateen statusdie ons in staat om de toestand van ons verzoek te controleren.
Als readyStateis gelijk aan 4, betekent dit dat het verzoek is voltooid. De readyStatewoning heeft 5 reacties. Lees er hier meer over.
Afgezien van het rechtstreeks maken van een Ajax-oproep met JavaScript, zijn er andere, krachtigere methoden om een HTTP-oproep te doen, zoals $.Ajaxeen jQuery-methode. Ik zal die nu bespreken.
jQuery-methoden
jQuery heeft veel methoden om HTTP-verzoeken gemakkelijk af te handelen. Om deze methoden te gebruiken, moet u de jQuery-bibliotheek in uw project opnemen.
$ .ajax
jQuery Ajax is een van de eenvoudigste methoden om een HTTP-oproep te doen.
De $ .ajax-methode heeft veel parameters nodig, waarvan sommige vereist zijn en andere optioneel. Het bevat twee terugbelopties successen errorom het ontvangen antwoord af te handelen.
$ .get-methode
De $ .get-methode wordt gebruikt om GET-verzoeken uit te voeren. Er zijn twee parameters voor nodig: het eindpunt en een callback-functie.
$ .post
De $.postmethode is een andere manier om gegevens op de server te plaatsen. Er zijn drie parameters voor nodig: de url, de gegevens die u wilt posten en een callback-functie.
$ .getJSON
De $.getJSONmethode haalt alleen gegevens op die de JSON-indeling hebben. Er zijn twee parameters voor nodig: de urlen een callback-functie.
jQuery heeft al deze methoden om gegevens op te vragen of op een externe server te plaatsen. Maar je kunt al deze methoden eigenlijk in één combineren: de $.ajaxmethode, zoals te zien is in het onderstaande voorbeeld:
halen
fetchis een nieuwe krachtige web-API waarmee u asynchrone verzoeken kunt doen. In feite fetchis het een van de beste en mijn favoriete manieren om een HTTP-verzoek te doen. Het geeft een "belofte" terug, wat een van de geweldige functies van ES6 is.Als u niet bekend bent met ES6, kunt u erover lezen in dit artikel. Door beloftes kunnen we het asynchrone verzoek slimmer afhandelen. Laten we eens kijken hoe fetchtechnisch werkt.
De fetchfunctie heeft één vereiste parameter nodig: de endpointURL. Het heeft ook andere optionele parameters, zoals in het onderstaande voorbeeld:
Zoals u kunt zien, fetchheeft het veel voordelen voor het maken van HTTP-verzoeken. U kunt er hier meer over lezen. Bovendien zijn er binnen fetch andere modules en plug-ins waarmee we een verzoek van en naar de server kunnen verzenden en ontvangen, zoals axios.
Axios
Axios is een open source-bibliotheek voor het maken van HTTP-verzoeken en biedt veel geweldige functies. Laten we eens kijken hoe het werkt.
Gebruik:
Ten eerste moet u Axios opnemen. Er zijn twee manieren om Axios in uw project op te nemen.
Ten eerste kunt u npm gebruiken:
npm install axios --saveDan moet je het importeren
import axios from 'axios'Ten tweede kunt u axios opnemen met behulp van een CDN.
Een verzoek doen met axios:
Met Axios kunt u GETen POSTgebruiken om gegevens van de server op te halen en te posten.
KRIJGEN:
axiosneemt één vereiste parameter, en kan ook een tweede optionele parameter hebben. Dit neemt enkele gegevens als een eenvoudige query.
POST:
Axios retourneert een "belofte". Als u bekend bent met beloften, weet u waarschijnlijk dat een belofte meerdere verzoeken kan uitvoeren. U kunt hetzelfde doen met axios en meerdere verzoeken tegelijkertijd uitvoeren.
Axios ondersteunt vele andere methoden en opties. Je kunt ze hier ontdekken.
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].