Her er de mest populære måder at lave en HTTP-anmodning i JavaScript på
JavaScript har fantastiske moduler og metoder til at foretage HTTP-anmodninger, der kan bruges til at sende eller modtage data fra en ressource på serversiden. I denne artikel vil vi se på et par populære måder at komme med HTTP-anmodninger i JavaScript.
Ajax
Ajax er den traditionelle måde at lave en asynkron HTTP-anmodning på. Data kan sendes ved hjælp af HTTP POST-metoden og modtages ved hjælp af HTTP GET-metoden. Lad os tage et kig og lave en GET
anmodning. Jeg bruger JSONPlaceholder, en gratis online REST API til udviklere, der returnerer tilfældige data i JSON-format.
For at foretage et HTTP-opkald i Ajax skal du initialisere en ny XMLHttpRequest()
metode, angive URL-slutpunktet og HTTP-metoden (i dette tilfælde GET). Endelig bruger vi open()
metoden til at binde HTTP-metoden og URL-slutpunktet sammen og kalde send()
metoden for at udløse anmodningen.
Vi logger HTTP-svaret til konsollen ved hjælp af XMLHTTPRequest.onreadystatechange
egenskaben, der indeholder den begivenhedshåndterer, der skal kaldes, når readystatechanged
begivenheden udløses.

const Http = new XMLHttpRequest(); const url="//jsonplaceholder.typicode.com/posts"; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => { console.log(Http.responseText) }
Hvis du ser din browserkonsol, returnerer den en matrix med data i JSON-format. Men hvordan ville vi vide, om anmodningen er udført? Med andre ord, hvordan vi kan håndtere svarene med Ajax?
Den onreadystatechange
har to metoder, readyState
og status
som giver os mulighed for at kontrollere tilstanden af vores anmodning.

Hvis readyState
er lig med 4, betyder det, at anmodningen er udført. Den readyState
har 5 svar. Lær mere om det her.
Bortset fra direkte at foretage et Ajax-opkald med JavaScript, er der andre mere kraftfulde metoder til at foretage et HTTP-opkald, som f.eks. $.Ajax
En jQuery-metode. Jeg vil diskutere dem nu.
jQuery-metoder
jQuery har mange metoder til let at håndtere HTTP-anmodninger. For at bruge disse metoder skal du medtage jQuery-biblioteket i dit projekt.
$ .ajax
jQuery Ajax er en af de enkleste metoder til at foretage et HTTP-opkald.

Metoden $ .ajax tager mange parametre, hvoraf nogle er påkrævede og andre valgfri. Den indeholder to tilbagekaldsmuligheder success
og error
til at håndtere det modtagne svar.
$ .get metode
Metoden $ .get bruges til at udføre GET-anmodninger. Det tager to parametre: slutpunktet og en tilbagekaldsfunktion.

$ .post
Den $.post
metode er en anden måde at skrive data til serveren. Det tager tre parametre: de url
, de data, du vil sende, og en tilbagekaldsfunktion.

$ .getJSON
Den $.getJSON
metode henter kun data, der er i JSON-format. Det tager to parametre: url
og en tilbagekaldsfunktion.

jQuery har alle disse metoder til at anmode om eller sende data til en ekstern server. Men du kan faktisk sætte alle disse metoder i en: $.ajax
metoden, som det ses i eksemplet nedenfor:

hente
fetch
er en ny kraftig web-API, der giver dig mulighed for at fremsætte asynkrone anmodninger. Faktisk fetch
er det en af de bedste og min foretrukne måde at lave en HTTP-anmodning på. Det returnerer et "løfte", som er en af de store funktioner i ES6.Hvis du ikke er fortrolig med ES6, kan du læse om det i denne artikel. Løfter giver os mulighed for at håndtere den asynkrone anmodning på en smartere måde. Lad os se på, hvordan fetch
teknisk fungerer.

Den fetch
funktion tager én ønskede parameter: endpoint
URL. Det har også andre valgfrie parametre som i eksemplet nedenfor:

Som du kan se, fetch
har det mange fordele ved at lave HTTP-anmodninger. Du kan lære mere om det her. Derudover er der inden for hentning andre moduler og plugins, der giver os mulighed for at sende og modtage en anmodning til og fra serversiden, såsom axios.
Axios
Axios is an open source library for making HTTP requests and provides many great features. Let’s have a look at how it works.
Usage:
First, you’d need to include Axios. There are two ways to include Axios in your project.
First, you can use npm:
npm install axios --save
Then you’d need to import it
import axios from 'axios'
Second, you can include axios using a CDN.
Making a Request with axios:
With Axios you can use GET
and POST
to retrieve and post data from the server.
GET:

axios
takes one required parameter, and can take a second optional parameter too. This takes some data as a simple query.
POST:

Axios returns a “Promise.” If you’re familiar with promises, you probably know that a promise can execute multiple requests. You can do the same thing with axios and run multiple requests at the same time.

Axios supports many other methods and options. You can explore them here.
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 FetchdataService
Then, 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:

Du kan tjekke demoeksemplet på Stackblitz.
Afslutter
Vi har lige dækket de mest populære måder at foretage en HTTP-opkaldsanmodning i JavaScript.
Tak for din tid. Hvis du kan lide det, skal du klappe op til 50, klikke på følg og nå ud til mig på Twitter.
Forresten har jeg for nylig arbejdet med en stærk gruppe softwareingeniører til en af mine mobilapplikationer. Organisationen var fantastisk, og produktet blev leveret meget hurtigt, meget hurtigere end andre firmaer og freelancere, jeg har arbejdet med, og jeg tror, jeg kan ærligt anbefale dem til andre projekter derude. Skyd mig en e-mail, hvis du vil kontakte - [email protected] .