Tässä on suosituimpia tapoja tehdä HTTP-pyyntö JavaScript-muodossa

JavaScriptillä on hyvät moduulit ja menetelmät HTTP-pyyntöjen tekemiseen, joita voidaan käyttää palvelimen puolen resurssin tietojen lähettämiseen tai vastaanottamiseen. Tässä artikkelissa aiomme tutkia muutamia suosittuja tapoja tehdä HTTP-pyyntöjä JavaScript-muodossa.

Ajax

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

Jos haluat soittaa HTTP-puhelun Ajaxissa, sinun on alustettava uusi XMLHttpRequest()menetelmä, määritettävä URL-päätepiste ja HTTP-menetelmä (tässä tapauksessa GET). Lopuksi käytämme open()menetelmää sitomaan HTTP-menetelmä ja URL-päätepiste yhteen ja kutsumme send()menetelmän käynnistämään pyynnön.

Kirjaamme HTTP-vastauksen konsoliin käyttämällä XMLHTTPRequest.onreadystatechangeominaisuutta, joka sisältää tapahtumakäsittelijän, jota kutsutaan readystatechangedtapahtuman käynnistämisen yhteydessä.

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

Jos tarkastelet selainkonsolia, se palauttaa joukon tietoja JSON-muodossa. Mutta mistä tiedämme, jos pyyntö toteutetaan? Toisin sanoen, miten voimme käsitellä vastauksia Ajaxilla?

onreadystatechangeKiinteistössä on kaksi tapaa, readyStateja statusjoiden avulla voimme tarkistaa hetkisiin pyynnöstä.

Jos readyStateon yhtä suuri kuin 4, se tarkoittaa, että pyyntö on tehty. Hotellilla readyStateon 5 vastausta. Lue lisää täältä.

Sen lisäksi, että Ajax-puhelu soitetaan suoraan JavaScriptillä, on olemassa muita tehokkaampia tapoja tehdä HTTP-puhelu, kuten $.AjaxjQuery-menetelmä. Keskustelen niistä nyt.

jQuery-menetelmät

jQueryllä on monia tapoja käsitellä HTTP-pyyntöjä helposti. Näiden menetelmien käyttämiseksi sinun on sisällytettävä jQuery-kirjasto projektiisi.

$ .ajax

jQuery Ajax on yksi yksinkertaisimmista tavoista soittaa HTTP-puhelu.

$ .Ajax-menetelmä vie monia parametreja, joista osa vaaditaan ja toiset valinnaiset. Se sisältää kaksi takaisinsoittovaihtoehtoa successja errorkäsittelemään vastaanotetun vastauksen.

$ .get-menetelmä

$ .Get -menetelmää käytetään GET-pyyntöjen suorittamiseen. Se vaatii kaksi parametria: päätepisteen ja soittopyynnön.

$ .post

$.postMenetelmä on toinen tapa lähettää tiedot palvelimelle. Siinä on kolme parametria: the url, tiedot, jotka haluat lähettää, ja soittopyyntö.

$ .getJSON

$.getJSONMenetelmä noutaa vain datan, joka on JSON-muodossa. Se vaatii kaksi parametria: urlja soittopyynnön.

jQueryllä on kaikki nämä menetelmät tietojen pyytämiseksi tai lähettämiseksi etäpalvelimelle. Mutta voit itse asiassa laittaa kaikki nämä menetelmät yhdeksi: $.ajaxmenetelmä, kuten alla olevassa esimerkissä näkyy:

hae

fetchon uusi tehokas web-sovellusliittymä, jonka avulla voit tehdä asynkronisia pyyntöjä. Itse asiassa se fetchon yksi parhaista ja suosikkini tapa tehdä HTTP-pyyntö. Se palauttaa lupauksen, joka on yksi ES6: n suurimmista ominaisuuksista.Jos et ole perehtynyt ES6: een, voit lukea siitä tästä artikkelista. Lupausten avulla voimme käsitellä asynkronisen pyynnön älykkäämmin. Katsotaanpa kuinka fetchteknisesti toimii.

fetchToiminto ottaa yksi pakollinen parametri: endpointURL-osoite. Sillä on myös muita valinnaisia ​​parametreja, kuten alla olevassa esimerkissä:

Kuten näette, sillä fetchon monia etuja HTTP-pyyntöjen tekemisessä. Voit oppia lisää täältä. Lisäksi haun sisällä on muita moduuleja ja laajennuksia, joiden avulla voimme lähettää ja vastaanottaa pyyntöä palvelimen puolelta ja palvelimelta, kuten aksioita.

Axios

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

Käyttö:

Ensin sinun on sisällytettävä Axios. On kaksi tapaa sisällyttää Axios projektiisi.

Ensinnäkin voit käyttää npm:

npm install axios --save

Sitten sinun on tuotava se

import axios from 'axios'

Toiseksi voit sisällyttää aksiot CDN: n avulla.

Pyynnön tekeminen aksioilla:

Axiosin avulla voit käyttää GETja POSThakea ja lähettää tietoja palvelimelta.

SAADA:

axiosottaa 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ä lupauksella voidaan suorittaa useita pyyntöjä. Voit tehdä saman asian aksioilla ja suorittaa useita pyyntöjä samanaikaisesti.

Axios tukee monia muita menetelmiä ja vaihtoehtoja. Voit tutustua niihin täällä.

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:

Voit tarkistaa esittelyesimerkin Stackblitzista.

Käärimistä

Olemme juuri tarkastelleet suosituimpia tapoja tehdä HTTP-puhelupyyntö JavaScript-muodossa.

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

Muuten, olen äskettäin työskennellyt vahvan ohjelmistoinsinöörien ryhmän kanssa yhdessä mobiilisovelluksissani. Organisaatio oli loistava, ja tuote toimitettiin erittäin nopeasti, paljon nopeammin kuin muut yritykset ja freelancerit, joiden kanssa olen työskennellyt, ja uskon voivani suositella heitä rehellisesti muihin siellä oleviin projekteihin. Ammu minulle sähköpostia, jos haluat ottaa yhteyttä - [email protected] .