JavaScript are module și metode excelente pentru a face cereri HTTP care pot fi utilizate pentru a trimite sau primi date dintr-o resursă de pe server. În acest articol, vom analiza câteva moduri populare de a face cereri HTTP în JavaScript.

Ajax

Ajax este modalitatea tradițională de a face o cerere HTTP asincronă. Datele pot fi trimise folosind metoda HTTP POST și primite folosind metoda HTTP GET. Să aruncăm o privire și să facem un GET cerere. Voi folosi JSONPlaceholder, un API REST online gratuit pentru dezvoltatori care returnează date aleatorii în format JSON.

Pentru a efectua un apel HTTP în Ajax, trebuie să inițializați un nou XMLHttpRequest() , specificați punctul final URL și metoda HTTP (în acest caz GET). În cele din urmă, folosim open() pentru a lega metoda HTTP și punctul final URL și pentru a apela send() metoda de a declanșa cererea.

Înregistrăm răspunsul HTTP la consolă folosind XMLHTTPRequest.onreadystatechange proprietate care conține gestionarul de evenimente pentru a fi apelat atunci când readystatechanged evenimentul este tras.

Iata cele mai populare moduri de a face o solicitare
const Http = new XMLHttpRequest();
const url="https://jsonplaceholder.typicode.com/posts";
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

Dacă vizualizați consola browserului, acesta va returna o matrice de date în format JSON. Dar cum am ști dacă se face solicitarea? Cu alte cuvinte, cum putem gestiona răspunsurile cu Ajax?

onreadystatechange proprietatea are două metode, readyState și status care ne permit să verificăm starea cererii noastre.

1611733745 630 Iata cele mai populare moduri de a face o solicitare

Dacă readyState este egal cu 4, înseamnă că cererea este făcută. readyState proprietatea are 5 răspunsuri. Aflați mai multe despre asta aici.

În afară de efectuarea unui apel Ajax direct cu JavaScript, există și alte metode mai puternice de a efectua un apel HTTP, cum ar fi $.Ajax care este o metodă jQuery. Voi discuta despre acestea acum.

Metode jQuery

jQuery are multe metode pentru a gestiona cu ușurință solicitările HTTP. Pentru a utiliza aceste metode, va trebui să includeți biblioteca jQuery în proiect.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$ .ajax

jQuery Ajax este una dintre cele mai simple metode de a efectua un apel HTTP.

1611733745 992 Iata cele mai populare moduri de a face o solicitare

Metoda $ .ajax ia mulți parametri, dintre care unii sunt necesari, iar alții sunt opționali. Conține două opțiuni de apelare inversă success și error pentru a gestiona răspunsul primit.

$ .metoda

Metoda $ .get este utilizată pentru a executa cereri GET. Este nevoie de doi parametri: punctul final și o funcție de apel invers.

1611733745 946 Iata cele mai populare moduri de a face o solicitare

$ .post

$.post metoda este un alt mod de a posta date pe server. Este nevoie de trei parametri: url, datele pe care doriți să le postați și o funcție de apel invers.

1611733745 851 Iata cele mai populare moduri de a face o solicitare

$ .getJSON

$.getJSON metoda preluează doar datele care sunt în format JSON. Este nevoie de doi parametri: url și o funcție de apel invers.

1611733745 52 Iata cele mai populare moduri de a face o solicitare

jQuery are toate aceste metode pentru a solicita sau posta date pe un server la distanță. Dar puteți pune toate aceste metode într-una singură: $.ajax metoda, așa cum se vede în exemplul de mai jos:

1611733745 205 Iata cele mai populare moduri de a face o solicitare

aduc

fetch este un nou API web puternic care vă permite să faceți cereri asincrone. De fapt, fetch este unul dintre cele mai bune și preferate moduri de a face o cerere HTTP. Revine o „Promisiune” care este una dintre caracteristicile excelente ale ES6. Dacă nu sunteți familiarizați cu ES6, puteți citi despre acesta în acest articol. Promisiunile ne permit să gestionăm cererea asincronă într-un mod mai inteligent. Să aruncăm o privire la cum fetch funcționează tehnic.

1611733745 536 Iata cele mai populare moduri de a face o solicitare

fetch funcția ia un parametru necesar: endpoint URL. Are și alți parametri opționali ca în exemplul de mai jos:

1611733745 983 Iata cele mai populare moduri de a face o solicitare

După cum puteți vedea, fetch are multe avantaje pentru a face cereri HTTP. Puteți afla mai multe despre asta aici. În plus, în cadrul preluării există alte module și pluginuri care ne permit să trimitem și să primim o cerere către și de la partea serverului, cum ar fi axios.

Axios

Axios este o bibliotecă open source pentru efectuarea de cereri HTTP și oferă multe caracteristici excelente. Să aruncăm o privire la modul în care funcționează.

Utilizare:

În primul rând, ar trebui să includeți Axios. Există două moduri de a include Axios în proiectul tău.

Mai întâi, puteți utiliza npm:

npm install axios --save

Atunci ar trebui să-l importați

import axios from 'axios'

În al doilea rând, puteți include axios utilizând un CDN.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Efectuarea unei cereri cu axios:

Cu Axios puteți utiliza GET și POST pentru a prelua și posta date de pe server.

OBȚINE:

1611733745 57 Iata cele mai populare moduri de a face o solicitare

axios ia un parametru necesar și poate lua și un al doilea parametru opțional. Aceasta ia unele date ca o simplă interogare.

POST:

1611733746 593 Iata cele mai populare moduri de a face o solicitare

Axios returnează o „Promisiune”. Dacă sunteți familiarizați cu promisiunile, probabil știți că o promisiune poate executa mai multe cereri. Puteți face același lucru cu axios și puteți rula mai multe cereri în același timp.

1611733746 450 Iata cele mai populare moduri de a face o solicitare

Axios acceptă multe alte metode și opțiuni. Le puteți explora aici.

HttpClient unghiular

Angular are propriul modul HTTP care funcționează cu aplicațiile Angular. Se folosește de RxJS bibliotecă pentru a gestiona cererile asincrone și oferă multe opțiuni pentru a efectua cererile HTTP.

Efectuarea unui apel către server utilizând Angular HttpClient

Pentru a face o solicitare utilizând Angular HttpClient, trebuie să ne rulăm codul într-o aplicație Angular. Așa că am creat una. Dacă nu sunteți familiarizați cu Angular, consultați articolul meu, aflați cum să creați prima aplicație Angular în 20 de minute.

Primul lucru pe care trebuie să-l facem este să importăm HttpClientModule în app.module.ts

1611733746 281 Iata cele mai populare moduri de a face o solicitare

Apoi, trebuie să creăm un serviciu care să gestioneze solicitările. Puteți genera cu ușurință un serviciu folosind CLI unghiular.

ng g service  FetchdataService

Apoi, trebuie să importăm HttpClient în fetchdataService.ts service și injectați-l în interiorul constructorului.

1611733746 479 Iata cele mai populare moduri de a face o solicitare

Si in app.component.ts import fetchdataService

//import
import { FetchdataService } from './fetchdata.service';

În cele din urmă, apelați serviciul și rulați-l.

app.component.ts:

1611733746 574 Iata cele mai populare moduri de a face o solicitare

Puteți consulta exemplul de demonstrație pe Stackblitz.

Încheierea

Tocmai am acoperit cele mai populare moduri de a efectua o solicitare de apel HTTP în JavaScript.

Multumesc pentru timpul acordat. Dacă vă place, bateți până la 50, dați clic pe urmați și contactați-mă pe mine Stare de nervozitate.

Apropo, am lucrat recent cu un grup puternic de ingineri software pentru una dintre aplicațiile mele mobile. Organizația a fost grozavă, iar produsul a fost livrat foarte repede, mult mai rapid decât alte firme și freelanceri cu care am lucrat și cred că pot să le recomand sincer pentru alte proiecte. Trimiteți-mi un e-mail dacă doriți să luați legătura – said@devsdata.com.