Štai populiariausi HTTP užklausos pateikimo „JavaScript“ būdai

„JavaScript“ turi puikius modulius ir metodus, kaip pateikti HTTP užklausas, kurios gali būti naudojamos duomenims siųsti ar gauti iš serverio šaltinio. Šiame straipsnyje mes nagrinėsime keletą populiarių būdų, kaip pateikti HTTP užklausas „JavaScript“.

„Ajax“

„Ajax“ yra tradicinis būdas pateikti asinchroninę HTTP užklausą. Duomenis galima siųsti naudojant HTTP POST metodą ir gauti naudojant HTTP GET metodą. Pažvelkime ir GETpateikime užklausą. Aš naudosiu „JSONPlaceholder“, nemokamą internetinę REST API kūrėjams, kuri pateikia atsitiktinius duomenis JSON formatu.

Norėdami atlikti HTTP skambutį „Ajax“, turite inicijuoti naują XMLHttpRequest()metodą, nurodyti URL galą ir HTTP metodą (šiuo atveju GET). Galiausiai mes naudojame open()metodą susieti HTTP metodą ir URL galą ir iškviečiame send()metodą, kad paleistume užklausą.

Mes užregistruojame HTTP atsakymą į konsolę naudodami XMLHTTPRequest.onreadystatechangeypatybę, kurioje yra įvykių tvarkytuvas, kurį reikia iškviesti readystatechangedįvykiui suaktyvinus.

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

Jei peržiūrėsite naršyklės konsolę, ji grąžins duomenų masyvą JSON formatu. Bet kaip mes žinotume, ar prašymas bus įvykdytas? Kitaip tariant, kaip mes galime elgtis atsakymuose su „Ajax“?

onreadystatechangeViešbutyje yra du būdai, readyStateir statuskuri leidžia mums patikrinti mūsų prašymą būklę.

Jei readyStateyra lygus 4, tai reiškia, kad užklausa įvykdyta. readyStateViešbutyje yra 5 atsakymus. Sužinokite daugiau apie tai čia.

Be tiesioginio „Ajax“ skambučio $.Ajaxatlikimo naudojant „JavaScript“, yra ir kitų galingesnių būdų atlikti HTTP skambutį, pvz., Kuris yra „jQuery“ metodas. Aš dabar aptarsiu tuos.

jQuery metodai

„jQuery“ turi daug būdų, kaip lengvai tvarkyti HTTP užklausas. Norėdami naudoti šiuos metodus, į savo projektą turėsite įtraukti „jQuery“ biblioteką.

$ .ajax

„jQuery Ajax“ yra vienas paprasčiausių būdų atlikti HTTP skambutį.

Metodas $ .ajax reikalauja daugybės parametrų, iš kurių kai kurie reikalingi, o kiti neprivalomi. Jame yra dvi atgalinio skambinimo parinktys successir errorgaunamas atsakymas.

$ .get metodas

GET užklausoms vykdyti naudojamas metodas $ .get. Tam reikia dviejų parametrų: galinio taško ir atgalinio skambinimo funkcijos.

$ .post

Šis $.postmetodas yra dar vienas būdas paskelbti duomenis į serverį. Tam reikia trijų parametrų: urlduomenų, kuriuos norite paskelbti, ir atgalinio skambinimo funkcijos.

$ .getJSON

$.getJSONMetodas nuskaito tik duomenis, kurie yra JSON formatu. Tam reikia dviejų parametrų: urlir atgalinio skambinimo funkcijos.

„jQuery“ turi visus šiuos būdus prašyti arba siųsti duomenis į nuotolinį serverį. Bet iš tikrųjų visus šiuos metodus galite susidėti į vieną: $.ajaxmetodą, kaip parodyta toliau pateiktame pavyzdyje:

atnešti

fetchyra nauja galinga žiniatinklio API, leidžianti pateikti asinchronines užklausas. Tiesą sakant, fetchtai yra vienas geriausių ir mėgstamiausių būdų pateikti HTTP užklausą. Tai grąžina „Pažadą“, kuris yra viena iš puikiausių ES6 savybių.Jei nesate susipažinę su ES6, galite apie tai perskaityti šiame straipsnyje. Pažadai leidžia protingiau tvarkyti asinchroninį prašymą. Pažvelkime, kaip fetchtechniškai veikia.

fetchFunkcija trunka vieną reikiamą parametrą: prie endpointURL. Jis taip pat turi kitus pasirenkamus parametrus, kaip nurodyta toliau pateiktame pavyzdyje:

Kaip matote, fetchturi daug privalumų teikiant HTTP užklausas. Daugiau apie tai galite sužinoti čia. Be to, „Fetch“ yra kiti moduliai ir papildiniai, leidžiantys mums siųsti ir gauti užklausą į serverio pusę ir iš jos, pavyzdžiui, axios.

Axios

„Axios“ yra atvirojo kodo biblioteka, skirta HTTP užklausoms teikti, ir teikia daug puikių funkcijų. Pažvelkime, kaip tai veikia.

Naudojimas:

Pirmiausia turėtumėte įtraukti „Axios“. Yra du būdai įtraukti „Axios“ į savo projektą.

Pirma, galite naudoti npm:

npm install axios --save

Tada turėsite jį importuoti

import axios from 'axios'

Antra, galite įtraukti axios naudodami CDN.

Užklausos su ašimis pateikimas:

Naudodami „Axios“ galite naudoti GETir, POSTnorėdami gauti ir paskelbti duomenis iš serverio.

GAUTI:

axiosima vieną būtiną parametrą ir gali paimti ir antrą pasirinktinį parametrą. Tam reikia tam tikrų duomenų kaip paprastos užklausos.

PAŠTAS:

„Axios“ pateikia „pažadą“. Jei esate susipažinęs su pažadais, tikriausiai žinote, kad pažadas gali įvykdyti kelias užklausas. Tą patį galite atlikti su „axios“ ir vienu metu vykdyti kelias užklausas.

„Axios“ palaiko daugelį kitų metodų ir parinkčių. Galite juos ištirti čia.

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:

„Stackblitz“ galite peržiūrėti demonstracinį pavyzdį.

Apvyniojimas

Ką tik aptarėme populiariausius būdus, kaip pateikti HTTP skambučio užklausą „JavaScript“.

Ačiū už sugaištą laiką. Jei jums tai patinka, plokite iki 50, spustelėkite sekti ir susisiekite su manimi „Twitter“.

Beje, neseniai dirbau su stipria programinės įrangos inžinierių grupe vienoje iš savo mobiliųjų programų. Organizacija buvo puiki ir produktas buvo pristatytas labai greitai, daug greičiau nei kitos firmos ir laisvai samdomi darbuotojai, su kuriais dirbau, ir manau, kad nuoširdžiai galiu juos rekomenduoti kitiems projektams. Parašykite man el. Laišką, jei norite susisiekti - [email protected] .