Un ghid practic ES6 cu privire la modul de a efectua cereri HTTP folosind API-ul Fetch

Imagine creată de Jad Joubran

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

Vrei să vezi rapid exemplele HTTP? Accesați secțiunea 5. Prima parte descrie partea asincronă a JavaScript atunci când lucrați cu solicitări HTTP.

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

Un model obișnuit în aplicațiile web / mobile actuale este de a solicita sau de a afișa un fel de date de la server (cum ar fi utilizatori, postări, comentarii, abonamente, plăți etc.) și apoi manipularea acestora folosind CRUD (creați, citiți, actualizați sau ștergeți) operațiunile.

Pentru a manipula în continuare o resursă, folosim deseori aceste metode JS (recomandate), cum ar fi .map (), .filter () și .reduce ().

Dacă doriți să deveniți un dezvoltator web mai bun, să vă porniți propria afacere, să învățați pe alții sau să vă îmbunătățiți abilitățile de dezvoltare, voi posta sfaturi și trucuri săptămânale în ultimele limbi de dezvoltare web.

Iată ce ne vom adresa

  1. Tratarea solicitărilor HTTP asincrone ale JS
  2. Ce este AJAX?
  3. De ce Fetch API?
  4. O introducere rapidă către API-ul Fetch
  5. Fetch API - exemple CRUD ← lucrurile bune!

1. Tratarea solicitărilor HTTP asincrone ale JS

Una dintre cele mai dificile părți cu înțelegerea modului de funcționare a JavaScript (JS) este înțelegerea modului de a face față solicitărilor asincrone, ceea ce necesită și înțelegerea modului în care funcționează promisiunile și apelurile.

În majoritatea limbajelor de programare, suntem conștienți să credem că operațiunile se petrec în ordine (secvențial). Prima linie trebuie executată înainte de a putea trece la linia următoare. Are sens, deoarece așa funcționăm noi oamenii și completăm sarcinile zilnice.

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

A descrie JavaScript ca fiind asincron este probabil înșelător. Este mai precis să spunem că JavaScript este sincron și cu un singur fir cu diferite mecanisme de apelare. Citeste mai mult.

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

2. Ce este AJAX

AJAX înseamnă Asynchronous JavaScript și XML, ș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 utiliza XML pentru a transporta date, dar este la fel de comun ca transportul de 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 încântați să aibă totul într-o singură aplicație de pagină (SPA), iar acest lucru duce la o mulțime de dureri asincrone! Dar, din fericire, avem biblioteci precum Angular, VueJS și React, care face acest proces mult mai ușor și practic.

În general, este important să existe un echilibru între ceea ce ar trebui să reîncarce întreaga pagină sau părți ale paginii.

Și în cele mai multe cazuri, o reîncărcare a paginii funcționează bine în ceea ce privește cât de puternice au devenit browserele. În zilele următoare, o reîncărcare a paginii ar dura câteva secunde (în funcție de locația serverului și de funcțiile browserului). Însă browserele de astăzi sunt extrem de rapide, deci decizia de a efectua AJAX sau reîncărcarea paginii 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ă îl faci fără buton. Și, în cele mai multe cazuri, clientului nu îi pasă dacă este un SPA sau o reîncărcare suplimentară a paginii. Desigur, nu mă înțelegeți greșit, iubesc SPA-urile, dar trebuie să luăm în considerare câteva compromisuri, dacă avem de-a face cu un buget limitat și lipsă de resurse, poate că o soluție rapidă este o abordare mai bună.

În final, depinde cu adevărat 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?

Aceasta ne permite să executăm cereri HTTP declarative către un server. Pentru fiecare solicitare, creează o Promisiune care trebuie rezolvată pentru a defini tipul de conținut și accesa la date.

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

Notă! Cunosc alte abordări HTTP, cum ar fi utilizarea Observable cu RXJS și modul în care se concentrează pe gestionarea / scurgerea memoriei în termeni de abonare / dezabonare și altele. Și poate asta va deveni noul mod standard de a face cereri HTTP, cine știe?
Oricum, în acest articol mă concentrez doar pe Fetch API, dar pot scrie în viitor un articol despre Observabil și RXJS.

4. O introducere rapidă către API-ul Fetch

Metoda fetch () returnează o Promisiune care rezolvă Răspunsul din Cerere pentru a arăta starea (cu succes sau nu). Dacă aveți vreodată această promisiune a mesajului {} în ecranul de jurnal al consolei, nu vă panicați - înseamnă practic că Promise funcționează, dar așteaptă să fie rezolvată. Așadar, pentru a o rezolva este nevoie de handonul .then () (callback) pentru a accesa conținutul.

Deci, pe scurt, mai întâi definim calea (Fetch), în al doilea rând solicităm date de la server (Cerere), în al treilea rând definim tipul de conținut (Body) și nu în ultimul rând, accesăm datele (Răspuns).

Dacă încercați să înțelegeți acest concept, nu vă faceți griji. Veți obține o imagine de ansamblu mai bună prin exemple prezentate mai jos.

Calea pe care o vom folosi pentru exemplele noastre
https://jsonplaceholder.typicode.com/users // returnează JSON

5. API-ul Fetch - exemple HTTP

Dacă dorim să accesăm datele, avem nevoie de două manevre .then () (callback). Dar dacă vrem să manipulăm resursa, avem nevoie de un singur .then () handler. Cu toate acestea, îl putem folosi pe cel de-al doilea pentru a ne asigura că valoarea a fost trimisă.

Șablonul de bază pentru Fetch API:

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

Exemple de API-uri preluate

  1. Afișarea unui utilizator
  2. Afișarea unei liste de utilizatori
  3. Crearea unui utilizator nou
  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

Așa cum am menționat anterior, procesul de afișare a unui singur utilizator este format din doi manevre .then () (callback), primul care definește obiectul, iar cel de-al doilea acces la date.

Observați doar citind șirul de interogare / utilizatori / 2 suntem capabili să înțelegem / să prezicem ce face API-ul. Pentru mai multe informații despre cum se scrie API REST de înaltă calitate, consultați aceste recomandări scrise 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 / utilizatori și nu / utilizatori / 2.

Exemplu

3. Crearea unui utilizator nou

Acesta arată un pic diferit de exemplul anterior. Dacă nu sunteți familiarizat cu protocolul HTTP, ne oferă pur și simplu câteva metode dulci, cum ar fi POST, GET, DELETE, UPDATE, PATCH și PUT. Aceste metode sunt verbe care pur și simplu descriu tipul de acțiune care trebuie executată și sunt utilizate în mare parte 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 pe care îl putem transmite împreună cu adresa URL pentru definirea setărilor personalizate, cum ar fi tipul metodei, corpul, datele de acreditare, anteturile și altele.

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

Exemplu

4. Ștergerea unui utilizator

Pentru a șterge utilizatorul, trebuie mai întâi să-l vizăm pe user cu / users / 1, apoi să 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 ce fac aceste verbe HTTP, verificați acest lucru.

Exemplu

Concluzie

Acum aveți o înțelegere de bază despre cum să recuperați sau să manipulați o resursă de pe server folosind API-ul Fetch de JavaScript, precum și cum să faceți față promisiunilor. Puteți utiliza acest articol ca un ghid pentru a structura cererile API pentru operațiunile CRUD.

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

Toate exemplele sunt prezentate în cererea de bază promisă în care distribuim cererea folosind apelul extins. Aceasta este o abordare standard cu care sunt mulți dezvoltatori cunoscuți, însă, dacă doriți să utilizați async / așteptați, verificați acest articol. Conceptul este același, cu excepția faptului că async / wait este mai ușor de citit și de scris.

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

  • O comparație între Angular și React
  • O minte haotică duce la un cod haotic
  • Dezvoltatori care doresc constant să învețe lucruri noi
  • Un ghid practic pentru modulele ES6
  • Aflați aceste concepte web principale
  • Îmbunătățiți-vă abilitățile cu aceste metode importante JavaScript
  • Programează-te mai rapid prin crearea de comenzi personalizate bash

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

P.S. Dacă v-a plăcut acest articol și doriți mai multe ca acestea, vă rugăm să aplaudați și să împărtășiți prietenilor care ar putea avea nevoie de el, este o karma bună.