În acest ghid, vă voi arăta cum să utilizați API-ul Fetch (ES6 +) pentru a efectua cereri HTTP către un API REST cu câteva exemple practice pe care cel mai probabil le veți întâlni.

Doriți să vedeți rapid exemplele HTTP? Accesați secțiunea 5. Prima parte descrie partea asincronă a JavaScript-ului atunci când lucrați cu cereri HTTP.

Notă: Toate exemplele sunt scrise în ES6 cu funcții săgeată.

Un tipar obișnuit în aplicațiile web / mobile actuale de astăzi este să solicitați sau să afișați un fel de date de la server (cum ar fi utilizatori, postări, comentarii, abonamente, plăți și așa mai departe) și apoi să le manipulați folosind CRUD (creați, citiți, actualizare sau ștergere) operațiuni.

Pentru a manipula în continuare o resursă, folosim adesea aceste metode JS (recomandat) precum .map(), .filter() și .reduce().

Dacă doriți să deveniți un dezvoltator web mai bun, să vă începeți propria afacere, să-i învățați pe alții sau să vă îmbunătățiți abilitățile de dezvoltare, voi posta săptămânal sfaturi și trucuri despre cele mai recente limbi de dezvoltare web.

Iată ce vom aborda

  1. Gestionarea cererilor HTTP asincrone ale lui JS
  2. Ce este AJAX?
  3. De ce Fetch API?
  4. O introducere rapidă la Fetch API
  5. Fetch API – exemple CRUD ← lucrurile bune!

1. Gestionarea cererilor HTTP asincrone ale JS

Una dintre cele mai provocatoare părți cu înțelegerea modului în care funcționează JavaScript (JS) este înțelegerea modului de tratare a cererilor asincrone, care necesită și înțelegerea modului în care funcționează promisiunile și apelurile de apel.

În majoritatea limbajelor de programare, suntem conectați să credem că operațiile se întâmplă în ordine (secvențial). Prima linie trebuie executată înainte să putem trece la următoarea linie. Are sens, deoarece așa operăm noi oamenii și îndeplinim sarcinile zilnice.

Dar cu JS, avem mai multe operațiuni care rulează în fundal / prim plan și nu putem avea o aplicație web care să blocheze de fiecare dată când așteaptă un eveniment de utilizator.

Descrierea JavaScript ca asincronă este probabil înșelătoare. Este mai exact să spunem că JavaScript este sincron și cu un singur fir cu diferite mecanisme de apel invers. Citeste mai mult.

Cu toate acestea, uneori lucrurile trebuie să se întâmple în ordine, altfel va provoca haos și rezultate neașteptate. Din acest motiv, putem folosi promisiuni și apeluri de apel pentru a o structura. Un exemplu ar putea fi validarea acreditării utilizatorului înainte de a trece la următoarea operație.

2. Ce este AJAX

AJAX înseamnă JavaScript și XML asincroni și permite actualizarea asincronă a paginilor web prin schimbul de date cu un server web în timp ce aplicația rulează. Pe scurt, înseamnă în esență că puteți actualiza părți ale unei pagini web fără a reîncărca întreaga pagină (adresa URL rămâne aceeași).

AJAX este un nume înșelător. Aplicațiile AJAX ar putea folosi XML pentru a transporta date, dar este la fel de obișnuit să transportați date ca text simplu sau text JSON.
– w3shools.com

AJAX până la capăt?

Am văzut că mulți dezvoltatori tind să fie foarte entuziasmați de a avea totul într-o singură aplicație de pagină (SPA), iar acest lucru duce la multă durere asincronă! Dar, din fericire, avem biblioteci precum Angular, VueJS și React care fac acest proces mult mai ușor și practic.

În general, este important să aveți un echilibru între ceea ce ar trebui să reîncărcați întreaga pagină sau părți ale acesteia.

Și, în majoritatea cazurilor, o reîncărcare a paginii funcționează bine în ceea ce privește cât de puternice au devenit browserele. În trecut, reîncărcarea paginii dura câteva secunde (în funcție de locația serverului și de capacitățile browserului). Dar browserele de astăzi sunt extrem de rapide, deci dacă decideți să efectuați AJAX sau reîncărcați pagina nu este o diferență mare.

Experiența mea personală este că este mult mai ușor și mai rapid să creezi un motor de căutare cu un simplu buton de căutare decât să faci asta fără un buton. Și, în majoritatea cazurilor, clientului nu îi pasă dacă este un SPA sau o reîncărcare suplimentară a paginii. Desigur, nu mă înțelegeți greșit, îmi plac SPA-urile, dar trebuie să luăm în considerare câteva compromisuri, dacă avem de-a face cu buget limitat și cu lipsa resurselor, atunci poate că o soluție rapidă este o abordare mai bună.

În cele din urmă, depinde într-adevăr de cazul de utilizare, dar personal simt că SPA-urile necesită mai mult timp de dezvoltare și un pic de durere de cap decât o simplă reîncărcare a paginii.

3. De ce Fetch API?

Acest lucru ne permite să efectuăm cereri HTTP declarative către un server. Pentru fiecare cerere, se creează un Promise care trebuie rezolvate pentru a defini tipul de conținut și a accesa datele.

Acum, avantajul Fetch API este că este pe deplin susținut de ecosistemul JS și este, de asemenea, o parte din Documente MDN Mozilla. Și nu în ultimul rând, funcționează din cutie pe majoritatea browserelor (cu excepția IE). Pe termen lung, presupun că va deveni modul standard de apelare a API-urilor web.

Notă! Sunt conștient de alte abordări HTTP, cum ar fi utilizarea Observable cu RXJS, și modul în care se concentrează pe gestionarea memoriei / scurgeri în ceea ce privește abonarea / dezabonarea și așa mai departe. Și poate că acesta va deveni noul mod standard de a face cereri HTTP, cine știe?

Oricum, în acest articol mă concentrez doar pe Fetch API, dar în viitor pot scrie un articol despre Observable și RXJS.

4. O introducere rapidă la Fetch API

fetch() metoda returnează a Promise care rezolvă Response de la Request pentru a arăta starea (reușită sau nu). Dacă primiți vreodată acest mesaj promise {} în ecranul jurnal al consolei, nu vă panicați – înseamnă practic că Promise funcționează, dar așteaptă să fie rezolvat. Deci, pentru a o rezolva, avem nevoie de .then() handler (callback) pentru a accesa conținutul.

Deci, pe scurt, mai întâi definim calea (Aduceți), în al doilea rând solicitați date de la server (Cerere), în al treilea rând definiți tipul de conținut (Corp) și nu în ultimul rând, accesăm datele (Raspuns).

Dacă vă chinuiți să înțelegeți acest concept, nu vă faceți griji. Veți obține o prezentare mai bună prin exemplele prezentate mai jos.

The path we'll be using for our examples 
https://jsonplaceholder.typicode.com/users // returns JSON

5. Fetch API – exemple HTTP

Dacă vrem să accesăm datele, avem nevoie de două .then() handlers (callback). Dar dacă vrem să manipulăm resursa, avem nevoie doar de una .then() manipulant. Cu toate acestea, o putem folosi pe a doua pentru a ne asigura că valoarea a fost trimisă.

Șablon API de preluare de bază:

Notă! Exemplul de mai sus este doar în scop ilustrativ. Codul nu va funcționa dacă îl executați.

Obțineți exemple de API

  1. Se afișează un utilizator
  2. Se afișează o listă de utilizatori
  3. Crearea unui nou utilizator
  4. Ștergerea unui utilizator
  5. Actualizarea unui utilizator

Notă! Resursa nu va fi creată cu adevărat pe server, dar va returna un rezultat fals pentru a imita un server real.

1. Afișarea unui utilizator

După cum sa menționat anterior, procesul de afișare a unui singur utilizator constă din doi .then() handlers (callback), primul care definește obiectul și al doilea care accesează datele.

Observați doar citind șirul de interogare /users/2 suntem capabili să înțelegem / să prezicem ce face API-ul. Pentru mai multe informații despre cum să scrieți API REST de înaltă calitate, consultați acestea instrucțiuni pont scris de Mahesh Haldar.

Exemplu

2. Afișarea unei liste de utilizatori

Exemplul este aproape identic cu exemplul anterior, cu excepția faptului că șirul de interogare este /users, si nu /users/2.

Exemplu

3. Crearea unui nou utilizator

Acesta arată puțin diferit de exemplul anterior. Dacă nu sunteți familiarizați cu protocolul HTTP, acesta ne oferă pur și simplu câteva metode dulci, cum ar fi POST, GET,DELETE, UPDATE, PATCH și PUT. Aceste metode sunt verbe care descriu pur și simplu tipul de acțiune care trebuie executată și sunt utilizate mai ales pentru a manipula resursa / datele de pe server.

Oricum, pentru a crea un utilizator nou cu Fetch API, va trebui să folosim verbul HTTP POST. Dar mai întâi, trebuie să-l definim undeva. Din fericire, există un argument opțional Init putem trece împreună cu adresa URL pentru definirea setărilor personalizate, cum ar fi tipul metodei, corpul, acreditările, antetele și așa mai departe.

Notă: fetch() parametrii metodei sunt identici cu cei ai Request() constructor.

Exemplu

4. Ștergerea unui utilizator

Pentru a șterge utilizatorul, trebuie mai întâi să-l vizăm cu /users/1, și apoi definim tipul de metodă care este DELETE.

Exemplu

5. Actualizarea unui utilizator

Verbul HTTP PUT este folosit pentru a manipula resursa țintă și, dacă doriți să faceți modificări parțiale, va trebui să utilizați PATCH. Pentru mai multe informații despre ceea ce fac aceste verbe HTTP, verificați acest lucru.

Exemplu

Concluzie

Acum aveți o înțelegere de bază despre cum să preluați sau să manipulați o resursă de pe server utilizând API-ul Fetch JavaScript, precum și cum să faceți față promisiunilor. Puteți utiliza acest articol ca ghid pentru cum să vă structurați cererile API pentru operațiuni CRUD.

Personal, consider că API-ul Fetch este declarativ și puteți înțelege cu ușurință ce se întâmplă fără nicio experiență de codificare tehnică.

Toate exemplele sunt prezentate în cererea de bază promisă, în care înlănțuim cererea folosind .then sună din nou. Aceasta este o abordare standard cu care mulți dezvoltatori sunt familiarizați, totuși, dacă doriți să o utilizați async/await verifica acest lucru articol afară. Conceptul este același, cu excepția async/await este mai ușor de citit și de scris.

Iată câteva articole pe care le-am scris despre ecosistemul web, împreună cu sfaturi și trucuri personale de programare.

Mă puteți găsi pe Medium unde public săptămânal. Sau poți să mă urmărești mai departe Stare de nervozitate, unde postez sfaturi și trucuri relevante pentru dezvoltarea web împreună cu povești personale.

PS Dacă ți-a plăcut acest articol și vrei mai multe ca acestea, te rog să dai palme ❤ și să le împărtășești prietenilor care ar putea avea nevoie de el, este o karma bună.