Tässä on suosituin tapa tehdä HTTP-pyyntö JavaScriptillä

JavaScriptillä on hienoja moduuleja ja menetelmiä HTTP-pyyntöjen tekemiseen, joita voidaan käyttää tietojen lähettämiseen tai vastaanottamiseen palvelinpuolen resursseista. Tässä artikkelissa tarkastellaan muutamia suosittuja tapoja tehdä HTTP-pyyntöjä JavaScriptiin.

ajax

Ajax on perinteinen tapa tehdä asynkroninen HTTP-pyyntö. Tietoja voidaan lähettää HTTP POST -menetelmällä ja vastaanottaa HTTP GET -menetelmällä. Katsotaanpa ja tehdään GET-pyyntö. Käytän JSONPlaceholder-ohjelmaa, ilmaista REST-sovellusliittymää kehittäjille, joka palauttaa satunnaiset tiedot JSON-muodossa.

HTTP-puhelun soittamiseksi Ajaxissa sinun on alustettava uusi XMLHttpRequest () -menetelmä, määritettävä URL-päätepiste ja HTTP-menetelmä (tässä tapauksessa GET). Lopuksi käytämme avointa () -menetelmää sitoaksesi HTTP-menetelmän ja URL-päätepisteen toisiinsa ja kutsumme Lähetä () -menetelmän pyynnön poistamiseksi.

Lokitamme HTTP-vastauksen konsoliin käyttämällä XMLHTTPRequest.onreadystatechange -ominaisuutta, joka sisältää tapahtumakäsittelijän, jolle kutsutaan, kun readystate-muutettu tapahtuma käynnistetään.

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

Jos tarkastelet selainkonsolia, se palauttaa tietoryhmän JSON-muodossa. Mutta kuinka me tietäisimme, jos pyyntö tehdään? Toisin sanoen, kuinka voimme käsitellä vastauksia Ajaxin kanssa?

Onreadystatechange-ominaisuudessa on kaksi tapaa, readyState ja status, joiden avulla voimme tarkistaa pyyntömme tilan.

Jos readyState on yhtä suuri kuin 4, se tarkoittaa, että pyyntö on valmis. ReadyState-omaisuudella on 5 vastausta. Lisätietoja tästä.

Sen lisäksi, että Ajax-puhelu suoritetaan suoraan JavaScriptillä, on myös muita tehokkaampia tapoja HTTP-puhelun soittamiseen, kuten $ .Ajax, joka on jQuery-menetelmä. Keskustelen niistä nyt.

jQuery-menetelmät

jQueryllä on monia tapoja käsitellä HTTP-pyyntöjä helposti. Jotta voit käyttää näitä menetelmiä, sinun on sisällytettävä jQuery-kirjasto projektiisi.

$ .ajax

jQuery Ajax on yksinkertaisin tapa soittaa HTTP-puhelu.

$ .Ajax-menetelmä vie monia parametrejä, joista osa vaaditaan ja toiset valinnaisia. Se sisältää kaksi takaisinsoittovaihtoehdon onnistumista ja virhettä vastaanotetun vastauksen käsittelemiseksi.

$ .get-menetelmä

GET-pyyntöjen suorittamiseen käytetään $ .get-menetelmää. Se vie kaksi parametria: päätepisteen ja takaisinsoitto-toiminnon.

$ .post

$ .Post-menetelmä on toinen tapa lähettää tietoja palvelimelle. Se vie kolme parametria: URL, tiedot, jotka haluat lähettää, ja takaisinsoitto-toiminnon.

$ .getJSON

$ .GetJSON-menetelmä noutaa vain JSON-muodossa olevat tiedot. Se vie kaksi parametria: URL ja takaisinsoitto-toiminto.

jQueryllä on kaikki nämä menetelmät tietojen pyytämiseksi tai lähettämiseksi etäpalvelimelle. Voit tosiasiallisesti laittaa kaikki nämä menetelmät yhdeksi: $ .ajax -menetelmän, kuten seuraavasta esimerkistä ilmenee:

noutaa

fetch on uusi tehokas web-sovellusliittymä, jonka avulla voit tehdä asynkronisia pyyntöjä. Itse asiassa hakeminen on yksi parhaimmista ja suosikki tapaani tehdä HTTP-pyyntö. Se palauttaa lupauksen, joka on yksi ES6: n upeista ominaisuuksista. Jos et tunne ES6: ta, voit lukea siitä tässä artikkelissa. Lupausten avulla voimme käsitellä asynkronista pyyntöä älykkäämmin. Katsotaanpa kuinka noutaminen teknisesti toimii.

Haun toiminto ottaa yhden vaaditun parametrin: päätepisteen URL-osoitteen. Sillä on myös muita valinnaisia ​​parametreja, kuten alla olevassa esimerkissä:

Kuten huomaat, haulla on monia etuja HTTP-pyyntöjen tekemisessä. Voit oppia siitä lisää täältä. Haussa on lisäksi muita moduuleja ja laajennuksia, kuten aksioita, joiden avulla voimme lähettää ja vastaanottaa pyyntöä palvelinpuolelta ja palvelimelta.

Axios

Axios on avoimen lähdekoodin kirjasto HTTP-pyyntöjen tekemiseen ja tarjoaa monia upeita ominaisuuksia. Katsotaanpa miten se toimii.

Käyttö:

Ensin sinun pitäisi sisällyttää Axios. On olemassa kaksi tapaa sisällyttää Axios projektiisi.

Ensinnäkin voit käyttää npm: tä:

asenna axios - säästää

Sitten sinun on tuotava se

tuo axios 'axios'

Toiseksi, voit sisällyttää aksioita käyttämällä CDN: tä.

Pyynnön esittäminen axiossa:

Axiosin avulla voit hakea ja lähettää tietoja palvelimelta GET: n ja POST: n avulla.

SAADA:

axios ottaa yhden vaaditun parametrin ja voi ottaa myös toisen valinnaisen parametrin. Tämä vie joitain tietoja yksinkertaisena kyselynä.

LÄHETTÄÄ:

Axios palauttaa lupauksen. Jos tunnet lupaukset, tiedät todennäköisesti, että lupaus voi suorittaa useita pyyntöjä. Voit tehdä saman asian aksioilla ja suorittaa useita pyyntöjä samanaikaisesti.

Axios tukee monia muita menetelmiä ja vaihtoehtoja. Voit tutkia niitä täällä.

Kulmainen HttpClient

Angularilla on oma HTTP-moduuli, joka toimii Angular-sovellusten kanssa. Se käyttää RxJS-kirjastoa asynkronisten pyyntöjen käsittelemiseen ja tarjoaa monia vaihtoehtoja HTTP-pyyntöjen suorittamiseen.

Soittaminen palvelimelle käyttämällä Angular HttpClient -sovellusta

Jotta voimme tehdä pyynnön kulmikkaalla HttpClient-ohjelmalla, meidän on suoritettava koodimme kulma-sovelluksen sisällä. Joten loin sellaisen. Jos et ole perehtynyt Kulmaan, tutustu artikkeliini, opi luomaan ensimmäinen Kulma-sovelluksesi 20 minuutissa.

Ensimmäinen asia, joka meidän on tehtävä, on tuoda HttpClientModule sovellukseen.module.ts

Sitten meidän on luotava palvelu pyyntöjen käsittelemiseksi. Voit luoda palvelun helposti kulma-CLI: n avulla.

g-palvelun FetchdataService

Sitten meidän on tuotava HttpClient fetchdataService.ts -palveluun ja ruiskutettava se rakentajan sisään.

Tuo app.component.ts-sovellukseen fetchdataService

//tuonti
tuo {FetchdataService} tiedostosta './fetchdata.service';

Soita lopuksi palveluun ja suorita se.

app.component.ts:

Voit tutustua esittelyesimerkkiin Stackblitzistä.

Käärimistä

Olemme juuri käsitellyt suosituimpia tapoja tehdä HTTP-puhelupyyntö JavaScriptissä.

Kiitos ajastasi. Jos pidät siitä, taputtele jopa 50, napsauta Seuraa ja ota minuun yhteyttä Twitterissä.