Siin on kõige populaarsemad viisid HTTP-päringu esitamiseks JavaScripti abil

JavaScriptil on HTTP-päringute tegemiseks suurepärased moodulid ja meetodid, mida saab kasutada serveripoolse ressursi andmete saatmiseks või vastuvõtmiseks. Selles artiklis uurime mõningaid populaarseid viise HTTP-päringute tegemiseks JavaScripti abil.

Ajax

Ajax on traditsiooniline viis asünkroonse HTTP-päringu tegemiseks. Andmeid saab saata HTTP POST-meetodil ja saada HTTP GET-meetodil. Vaatame ja esitame GETtaotluse. Kasutan arendajatele mõeldud tasuta veebipõhist REST API-d JSONPlaceholder, mis tagastab juhuslikud andmed JSON-vormingus.

Ajaxis HTTP-kõne tegemiseks peate lähtestama uue XMLHttpRequest()meetodi, määrama URL-i lõpp-punkti ja HTTP-meetodi (antud juhul GET). Lõpuks kasutame open()meetodit HTTP-meetodi ja URL-i lõpppunkti sidumiseks ja kutsume send()meetodit päringu käivitamiseks.

Logime HTTP-vastuse konsooli, kasutades XMLHTTPRequest.onreadystatechangeatribuuti, mis sisaldab sündmuse käitlejat, mida sündmuse käivitamisel kutsuda readystatechanged.

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

Kui vaatate oma brauseri konsooli, tagastab see massiivi JSON-vormingus. Aga kuidas saaksime teada, kui taotlus täidetakse? Teisisõnu, kuidas saame Ajaxiga vastustega hakkama?

onreadystatechangeVara on kaks meetodit, readyStateja statusmis võimaldab meil kontrollida riik meie taotlus.

Kui readyStateväärtus on 4, tähendab see, et taotlus on täidetud. readyStatePakub 5 vastuseid. Lisateavet selle kohta leiate siit.

Lisaks Ajaxi kõne otsesele tegemisele JavaScripti abil on HTTP-kõne tegemiseks muid tõhusamaid meetodeid, näiteks $.AjaxjQuery meetod. Ma arutan neid nüüd.

jQuery meetodid

jQueryl on HTTP-päringute hõlpsaks käsitlemiseks palju meetodeid. Nende meetodite kasutamiseks peate oma projekti kaasama jQuery teegi.

$ .ajax

jQuery Ajax on üks lihtsamaid viise HTTP-kõne tegemiseks.

Meetod $ .ajax võtab palju parameetreid, millest mõned on kohustuslikud ja teised valikulised. See sisaldab kahte tagasihelistamisvõimalust successja errorsaadud vastuse käsitlemist.

Meetod $ .get

GET-taotluste täitmiseks kasutatakse meetodit $ .get. Selleks on vaja kahte parameetrit: lõpp-punkt ja tagasihelistamisfunktsioon.

$ .post

$.postMeetod on üks võimalus paigutada andmed serverisse. Selleks on vaja kolme parameetrit: urlandmed, andmed, mida soovite postitada, ja tagasihelistamisfunktsioon.

$ .getJSON

$.getJSONMeetodit ainult hangib andmeid, mis on JSON formaadis. Selleks on vaja kahte parameetrit: urlja tagasihelistamisfunktsioon.

jQueryl on kõik need meetodid, et andmeid serverisse pärida või postitada. Kuid tegelikult saate kõik need meetodid ühte: $.ajaxmeetod, nagu on näha allpool toodud näites:

tooma

fetchon uus võimas veebi API, mis võimaldab teil teha asünkroonseid taotlusi. Tegelikult fetchon see üks parimaid ja minu lemmik viise HTTP-päringu esitamiseks. See tagastab lubaduse, mis on üks ES6 suurepäraseid omadusi.Kui te pole ES6-ga tuttav, saate selle kohta lugeda sellest artiklist. Lubadused võimaldavad meil asünkroonse taotlusega arukamalt hakkama saada. Vaatame, kuidas see fetchtehniliselt töötab.

fetchFunktsioon võtab ühe vajaliku parameetri: endpointURL. Sellel on ka muid valikulisi parameetreid, nagu allpool toodud näites:

Nagu näete, fetchon HTTP-päringute tegemisel palju eeliseid. Selle kohta saate lisateavet siit. Lisaks on fetchis muid mooduleid ja pistikprogramme, mis võimaldavad meil serveripoolsele ja serveripoolsele päringule saata ja vastu võtta, näiteks aksiod.

Aksios

Axios on avatud lähtekoodiga teek HTTP-päringute esitamiseks ja pakub palju suurepäraseid funktsioone. Vaatame, kuidas see töötab.

Kasutamine:

Esiteks peate lisama Axiose. Axiose projekti kaasamiseks on kaks võimalust.

Esiteks saate kasutada npm:

npm install axios --save

Siis peate selle importima

import axios from 'axios'

Teiseks võite aksioone lisada CDN-i abil.

Aksioosidega päringu esitamine:

Mis Axios saate GETja POSTlaadida ja post andmed serverisse.

Hangi:

axiosvõtab ühe nõutava parameetri ja võib võtta ka teise valikulise parameetri. See võtab osa andmeid lihtsa päringuna.

POSTITAMINE:

Axios tagastab "Lubaduse". Kui olete lubadustega tuttav, teate tõenäoliselt, et lubadusega saab täita mitu taotlust. Võite teha sama asja aksioosidega ja käivitada mitu taotlust korraga.

Axios toetab paljusid muid meetodeid ja võimalusi. Neid saate siin uurida.

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:

Stackblitzis saate tutvuda demonäidisega.

Pakkimine

Oleme just käsitlenud JavaScripti kõige populaarsemaid viise HTTP-kõnesoovi tegemiseks.

Täname teid teie aja eest. Kui teile meeldib, plaksutage kuni 50, klõpsake käsku Follow ja pöörduge minu poole Twitteris.

Muide, olen hiljuti teinud koostööd ühe oma mobiilirakenduse jaoks tugeva tarkvarainseneride rühmaga. Korraldus oli suurepärane ja toode tarniti väga kiiresti, palju kiiremini kui teised ettevõtted ja vabakutselised töötajad, kellega ma olen koostööd teinud, ja ma arvan, et saan neid ausalt soovitada ka teiste sealsete projektide jaoks. Kui soovite ühendust võtta, tulistage mulle e-kiri - [email protected] .