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 GETanmodning. 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.onreadystatechangeegenskaben, der indeholder den begivenhedshåndterer, der skal kaldes, når readystatechangedbegivenheden 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 onreadystatechangehar to metoder, readyStateog statussom giver os mulighed for at kontrollere tilstanden af vores anmodning.

Hvis readyStateer lig med 4, betyder det, at anmodningen er udført. Den readyStatehar 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. $.AjaxEn 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 successog errortil 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 $.postmetode 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 $.getJSONmetode henter kun data, der er i JSON-format. Det tager to parametre: urlog 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: $.ajaxmetoden, som det ses i eksemplet nedenfor:

hente

fetcher en ny kraftig web-API, der giver dig mulighed for at fremsætte asynkrone anmodninger. Faktisk fetcher 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 fetchteknisk fungerer.

Den fetchfunktion tager én ønskede parameter: endpointURL. Det har også andre valgfrie parametre som i eksemplet nedenfor:

Som du kan se, fetchhar 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] .