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 GET
podnesite 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.onreadystatechange
svojstvo koje sadrži obrađivač događaja koji se poziva kada se readystatechanged
događ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?
onreadystatechange
Objekt ima dvije metode, readyState
a status
koje nam omogućuju da provjerite stanje našeg zahtjeva.

Ako readyState
je jednako 4, znači da je zahtjev izvršen. readyState
Objekt 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 $.Ajax
koja 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 success
i error
upravljanje 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
$.post
Metoda je još jedan način za slanje podataka na poslužitelj. Potrebna su tri parametra:, url
podaci koje želite objaviti i funkcija povratnog poziva.

$ .getJSON
$.getJSON
Način dohvaća samo podatke koji se u JSON formatu. Potrebna su dva parametra: url
i 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: $.ajax
metodu, kao što se vidi u donjem primjeru:

donijeti
fetch
novi je snažni web API koji vam omogućuje upućivanje asinkronih zahtjeva. U stvari, to fetch
je 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 fetch
tehnički radi.

fetch
Funkcija traje jedan obavezni parametar: na endpoint
URL. Također ima i druge neobavezne parametre kao u primjeru u nastavku:

Kao što vidite, fetch
ima 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 GET
i POST
za dohvaćanje i objavljivanje podataka s poslužitelja.
DOBITI:

axios
uzima 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].