Šeit ir vispopulārākie veidi, kā veikt HTTP pieprasījumu JavaScript

JavaScript ir lieliski moduļi un metodes, kā izveidot HTTP pieprasījumus, kurus var izmantot, lai nosūtītu vai saņemtu datus no servera puses resursa. Šajā rakstā mēs aplūkosim dažus populārus veidus, kā veikt HTTP pieprasījumus JavaScript.

Ajax

Ajax ir tradicionāls veids, kā veikt asinhronu HTTP pieprasījumu. Datus var nosūtīt, izmantojot HTTP POST metodi, un saņemt, izmantojot HTTP GET metodi. Apskatīsim un GETpieprasīsim. Es izmantošu JSONPlaceholder - bezmaksas tiešsaistes REST API izstrādātājiem, kas atgriež nejaušus datus JSON formātā.

Lai veiktu HTTP zvanu Ajax, jums ir jāinicializē jauna XMLHttpRequest()metode, jānorāda URL galapunkts un HTTP metode (šajā gadījumā GET). Visbeidzot, mēs izmantojam open()metodi, lai sasaistītu HTTP metodi un URL galapunktu un izsauktu send()metodi, lai aktivizētu pieprasījumu.

Mēs reģistrējam HTTP atbildi konsolē, izmantojot XMLHTTPRequest.onreadystatechangerekvizītu, kurā ir notikumu apdarinātājs, kas jāizsauc, kad readystatechangednotikums tiek aktivizēts.

const Http = new XMLHttpRequest(); const url="//jsonplaceholder.typicode.com/posts"; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => { console.log(Http.responseText) }

Ja skatīsit pārlūkprogrammas konsoli, tā atgriezīs datu masīvu JSON formātā. Bet kā mēs uzzinātu, vai pieprasījums tiek izpildīts? Citiem vārdiem sakot, kā mēs varam apstrādāt atbildes ar Ajax?

onreadystatechangeĪpašumā ir divas metodes, readyStateun statuskas ļauj mums pārbaudīt stāvokli mūsu lūguma.

Ja tas readyStateir vienāds ar 4, tas nozīmē, ka pieprasījums ir izpildīts. readyStateĪpašumā ir 5 atbildes. Uzziniet vairāk par to šeit.

Papildus tam, ka tieši veicat Ajax zvanu ar JavaScript, ir arī citas efektīvākas HTTP zvana veikšanas metodes, piemēram, $.AjaxjQuery metode. Es tos tagad apspriedīšu.

jQuery metodes

jQuery ir daudzas metodes, kā ērti apstrādāt HTTP pieprasījumus. Lai izmantotu šīs metodes, projektā jāiekļauj jQuery bibliotēka.

$ .ajax

jQuery Ajax ir viena no vienkāršākajām metodēm, kā veikt HTTP zvanu.

Metodei $ .ajax nepieciešami daudzi parametri, no kuriem daži ir nepieciešami, bet citi nav obligāti. Tajā ir divas atzvanīšanas iespējas successun errorapstrādāt saņemto atbildi.

Metode $ .get

GET pieprasījumu izpildei tiek izmantota metode $ .get. Tam nepieciešami divi parametri: beigu punkts un atzvanīšanas funkcija.

$ .post

$.postMetode ir vēl viens veids, lai publicētu datus uz serveri. Tam nepieciešami trīs parametri: the url, dati, kurus vēlaties publicēt, un atzvanīšanas funkcija.

$ .getJSON

$.getJSONMetodi iegūst tikai tos datus, kas ir JSON formātā. Tam nepieciešami divi parametri: urlun atzvanīšanas funkcija.

jQuery ir visas šīs metodes, lai pieprasītu vai nosūtītu datus uz attālo serveri. Bet jūs faktiski varat salikt visas šīs metodes vienā: $.ajaxmetode, kā redzams zemāk esošajā piemērā:

atnest

fetchir jauna jaudīga tīmekļa API, kas ļauj veikt asinhronus pieprasījumus. Patiesībā tas fetchir viens no labākajiem un iecienītākajiem veidiem, kā iesniegt HTTP pieprasījumu. Tas atgriež “solījumu”, kas ir viena no lielākajām ES6 īpašībām.Ja neesat pazīstams ar ES6, varat par to izlasīt šajā rakstā. Solījumi ļauj mums gudrāk rīkoties ar asinhrono pieprasījumu. Apskatīsim, kā fetchtehniski darbojas.

fetchFunkcija aizņem vienu nepieciešamo parametru: šo endpointURL. Tam ir arī citi izvēles parametri, kā parādīts piemērā:

Kā redzat, fetchHTTP pieprasījumu veikšanai ir daudz priekšrocību. Jūs varat uzzināt vairāk par to šeit. Turklāt ielādes ietvaros ir citi moduļi un spraudņi, kas ļauj mums nosūtīt un saņemt pieprasījumu uz servera pusi un no tā, piemēram, axios.

Axios

Axios ir atvērtā pirmkoda bibliotēka HTTP pieprasījumu veikšanai, un tā nodrošina daudzas lieliskas funkcijas. Apskatīsim, kā tas darbojas.

Lietošana:

Pirmkārt, jums jāiekļauj Axios. Ir divi veidi, kā Axios iekļaut savā projektā.

Pirmkārt, jūs varat izmantot npm:

npm install axios --save

Tad jums tas būs jāimportē

import axios from 'axios'

Otrkārt, jūs varat iekļaut axios, izmantojot CDN.

Pieprasījuma iesniegšana ar axios:

Izmantojot Axios, varat izmantot GETun, POSTlai izgūtu un izliktu datus no servera.

GŪT:

axiosņem vienu nepieciešamo parametru un var ņemt arī otro izvēles parametru. Daži dati tiek uzskatīti par vienkāršu vaicājumu.

POST:

Axios atgriež solījumu. Ja esat iepazinies ar solījumiem, jūs droši vien zināt, ka solījums var izpildīt vairākus pieprasījumus. Jūs varat darīt to pašu ar axios un vienlaikus izpildīt vairākus pieprasījumus.

Axios atbalsta daudzas citas metodes un iespējas. Jūs varat tos izpētīt šeit.

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:

Varat apskatīt demonstrācijas piemēru vietnē Stackblitz.

Iesaiņošana

Mēs tikko aplūkojām populārākos veidus, kā veikt HTTP zvana pieprasījumu JavaScript.

Paldies par jūsu laiku. Ja jums tas patīk, aplaudējiet līdz 50, noklikšķiniet uz sekot un sazinieties ar mani Twitter.

Starp citu, es nesen strādāju ar spēcīgu programmatūras inženieru grupu vienā no savām mobilajām lietojumprogrammām. Organizācija bija lieliska, un produkts tika piegādāts ļoti ātri, daudz ātrāk nekā citi uzņēmumi un ārštata darbinieki, ar kuriem esmu strādājis, un es domāju, ka varu viņus godīgi ieteikt citiem projektiem. Uzņemiet man e-pastu, ja vēlaties sazināties - [email protected] .