Evo najpopularnijih načina za izradu HTTP zahtjeva u JavaScript-u

JavaScript ima sjajne module i metode za izradu HTTP zahtjeva koji se mogu koristiti za slanje ili primanje podataka s resursa na poslužitelju. U ovom ćemo članku pogledati nekoliko popularnih načina izrade HTTP zahtjeva u JavaScript-u.

Ajax

Ajax je tradicionalni način za izradu asinkronog HTTP zahtjeva. Podaci se mogu slati metodom HTTP POST i primati metodom HTTP GET. Pogledajmo i GETpodnesite zahtjev. Koristit ću JSONPlaceholder, besplatni internetski REST API za programere koji vraća slučajne podatke u JSON formatu.

Da biste uputili HTTP poziv u Ajaxu, trebate inicijalizirati novu XMLHttpRequest()metodu, odrediti krajnju točku URL-a i HTTP metodu (u ovom slučaju GET). Napokon, open()metodu koristimo za povezivanje HTTP metode i krajnje točke URL-a i pozivamo je send()da aktivira zahtjev.

HTTP odgovor bilježimo na konzoli koristeći XMLHTTPRequest.onreadystatechangesvojstvo koje sadrži obrađivač događaja koji se poziva kada se readystatechangeddogađaj pokrene.

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

Ako pregledate konzolu preglednika, vratit će Niz podataka u JSON formatu. Ali kako bismo znali je li zahtjev izvršen? Drugim riječima, kako se možemo nositi s odgovorima s Ajaxom?

onreadystatechangeObjekt ima dvije metode, readyStatea statuskoje nam omogućuju da provjerite stanje našeg zahtjeva.

Ako readyStateje jednako 4, znači da je zahtjev izvršen. readyStateObjekt ima 5 odgovora. Saznajte više o tome ovdje.

Osim izravnog upućivanja Ajax poziva s JavaScriptom, postoje i druge moćnije metode upućivanja HTTP poziva, poput one $.Ajaxkoja je jQuery metoda. Sad ću o tome razgovarati.

jQuery metode

jQuery ima mnogo metoda za jednostavno rukovanje HTTP zahtjevima. Da biste koristili ove metode, morat ćete u svoj projekt uključiti knjižnicu jQuery.

$ .ajax

jQuery Ajax jedna je od najjednostavnijih metoda za upućivanje HTTP poziva.

$ .Ajax metoda uzima mnoge parametre, od kojih su neki potrebni, a drugi neobavezni. Sadrži dvije mogućnosti povratnog poziva successi errorupravljanje primljenim odgovorom.

$ .get metoda

Metoda $ .get koristi se za izvršavanje GET zahtjeva. Potrebna su dva parametra: krajnja točka i funkcija povratnog poziva.

$ .pošte

$.postMetoda je još jedan način za slanje podataka na poslužitelj. Potrebna su tri parametra:, urlpodaci koje želite objaviti i funkcija povratnog poziva.

$ .getJSON

$.getJSONNačin dohvaća samo podatke koji se u JSON formatu. Potrebna su dva parametra: urli funkcija povratnog poziva.

jQuery ima sve ove metode za traženje ili objavljivanje podataka na udaljenom poslužitelju. Ali zapravo sve ove metode možete staviti u jednu: $.ajaxmetodu, kao što se vidi u donjem primjeru:

donijeti

fetchnovi je snažni web API koji vam omogućuje upućivanje asinkronih zahtjeva. U stvari, to fetchje jedan od najboljih i najdražih načina za izradu HTTP zahtjeva. Vraća „Obećanje“ što je jedna od sjajnih značajki ES6.Ako niste upoznati s ES6, o njemu možete pročitati u ovom članku. Obećanja nam omogućuju da pametniji način obrađujemo asinkroni zahtjev. Pogledajmo kako fetchtehnički radi.

fetchFunkcija traje jedan obavezni parametar: na endpointURL. Također ima i druge neobavezne parametre kao u primjeru u nastavku:

Kao što vidite, fetchima mnogo prednosti za izradu HTTP zahtjeva. Više o tome možete saznati ovdje. Uz to, unutar dohvaćanja postoje i drugi moduli i dodaci koji nam omogućuju slanje i primanje zahtjeva na i od strane poslužitelja, poput axios.

Aksiosa

Axios je biblioteka otvorenog koda za izradu HTTP zahtjeva i nudi mnoge izvrsne značajke. Pogledajmo kako to funkcionira.

Upotreba:

Prvo, trebali biste uključiti Axios. Postoje dva načina za uključivanje Axiosa u vaš projekt.

Prvo, možete koristiti npm:

npm install axios --save

Tada biste ga trebali uvesti

import axios from 'axios'

Drugo, možete uključiti aksije pomoću CDN-a.

Izrada zahtjeva s aksiom:

Pomoću Axiosa možete koristiti GETi POSTza dohvaćanje i objavljivanje podataka s poslužitelja.

DOBITI:

axiosuzima jedan potreban parametar, a može uzeti i drugi opcijski parametar. Ovo uzima neke podatke kao jednostavan upit.

POŠTA:

Axios vraća "Obećanje". Ako ste upoznati s obećanjima, vjerojatno znate da obećanje može izvršiti više zahtjeva. Možete raditi isto s aksiom i istodobno pokretati više zahtjeva.

Axios podržava mnoge druge metode i opcije. Možete ih istražiti ovdje.

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:

You can check out the demo example on Stackblitz.

Wrapping Up

We’ve just covered the most popular ways to make an HTTP call request in JavaScript.

Thank you for your time. If you like it, clap up to 50, click follow, and reach out to me on Twitter.

By the way, I’ve recently worked with a strong group of software engineers for one of my mobile applications. The organization was great, and the product was delivered very quickly, much faster than other firms and freelancers I’ve worked with, and I think I can honestly recommend them for other projects out there. Shoot me an email if you want to get in touch — [email protected].