Her er de mest populære måtene å lage en HTTP-forespørsel i JavaScript

JavaScript har flotte moduler og metoder for å lage HTTP-forespørsler som kan brukes til å sende eller motta data fra en server-ressurs. I denne artikkelen skal vi se på noen populære måter å lage HTTP-forespørsler i JavaScript.

Ajax

Ajax er den tradisjonelle måten å lage en asynkron HTTP-forespørsel på. Data kan sendes ved hjelp av HTTP POST-metoden og mottas ved hjelp av HTTP GET-metoden. La oss ta en titt og komme med en GETforespørsel. Jeg bruker JSONPlaceholder, et gratis online REST API for utviklere som returnerer tilfeldige data i JSON-format.

For å foreta et HTTP-anrop i Ajax, må du initialisere en ny XMLHttpRequest()metode, spesifisere URL-endepunktet og HTTP-metoden (i dette tilfellet GET). Til slutt bruker vi open()metoden for å knytte HTTP-metoden og URL-endepunktet sammen og kalle send()metoden for å utløse forespørselen.

Vi logger HTTP-responsen til konsollen ved å bruke XMLHTTPRequest.onreadystatechangeegenskapen som inneholder hendelsesbehandleren som skal ringes når readystatechangedhendelsen utlø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 på nettleserkonsollen din, vil den returnere en matrise med data i JSON-format. Men hvordan ville vi vite om forespørselen er ferdig? Med andre ord, hvordan kan vi håndtere svarene med Ajax?

Den onreadystatechangeEiendommen har to metoder, readyStateog statussom tillater oss å sjekke tilstanden til vår forespørsel.

Hvis readyStateer lik 4, betyr det at forespørselen er ferdig. Den readyStateegenskap har 5 responser. Lær mer om det her.

Bortsett fra direkte å ringe et Ajax-anrop med JavaScript, er det andre kraftigere metoder for å ringe et HTTP-anrop, som for eksempel $.Ajaxen jQuery-metode. Jeg skal diskutere disse nå.

jQuery-metoder

jQuery har mange metoder for å enkelt håndtere HTTP-forespørsler. For å bruke disse metodene, må du inkludere jQuery-biblioteket i prosjektet ditt.

$ .ajax

jQuery Ajax er en av de enkleste metodene for å foreta en HTTP-samtale.

$ .Ajax-metoden tar mange parametere, hvorav noen kreves og andre er valgfrie. Den inneholder to tilbakeringingsalternativer successog for errorå håndtere det mottatte svaret.

$ .get-metoden

Metoden $ .get brukes til å utføre GET-forespørsler. Det tar to parametere: sluttpunktet og en tilbakeringingsfunksjon.

$ .post

Den $.postmetoden er en annen måte å legge inn data til serveren. Det tar tre parametere: urldataene du vil legge ut og en tilbakeringingsfunksjon.

$ .getJSON

Den $.getJSONmetode bare henter data som er i JSON format. Det tar to parametere: urlog en tilbakeringingsfunksjon.

jQuery har alle disse metodene for å be om eller legge ut data til en ekstern server. Men du kan faktisk sette alle disse metodene i en: $.ajaxmetoden, som vist i eksemplet nedenfor:

hente

fetcher et nytt kraftig web-API som lar deg komme med asynkrone forespørsler. Faktisk fetcher det en av de beste og min favorittmåter å lage en HTTP-forespørsel. Det returnerer et "løfte" som er en av de store funksjonene i ES6.Hvis du ikke er kjent med ES6, kan du lese om det i denne artikkelen. Løfter tillater oss å håndtere den asynkrone forespørselen på en smartere måte. La oss ta en titt på hvordan fetchteknisk fungerer.

Den fetchfunksjonen tar en nødvendig parameter: den endpointURL. Den har også andre valgfrie parametere som i eksemplet nedenfor:

Som du kan se, fetchhar mange fordeler for å lage HTTP-forespørsler. Du kan lære mer om det her. I tillegg, innen henting, er det andre moduler og plugins som lar oss sende og motta en forespørsel til og fra serversiden, for eksempel aksios.

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 sjekke ut demoeksemplet på Stackblitz.

Innpakning

Vi har nettopp dekket de mest populære måtene å lage en HTTP-samtaleforespørsel i JavaScript.

Takk for tiden din. Hvis du liker det, klapp opp til 50, klikk på følg og nå ut til meg på Twitter.

Forresten, jeg har nylig jobbet med en sterk gruppe programvareingeniører for en av mobilapplikasjonene mine. Organisasjonen var god, og produktet ble levert veldig raskt, mye raskere enn andre firmaer og frilansere jeg har jobbet med, og jeg tror jeg ærlig kan anbefale dem til andre prosjekter der ute. Skyt meg en e-post hvis du vil ta kontakt - [email protected] .