API-ul JavaScript Fetch explicat

de
Tweet
Share
Share
Pin

Interfața Fetch API din JavaScript oferă un mod simplu și direct de a iniția cereri de la aplicația client care rulează în browser.

Se caracterizează prin ușurința utilizării și adoptarea sintaxei JavaScript moderne. Acest articol servește drept ghid pentru înțelegerea și folosirea eficientă a API-ului Fetch.

Ce este API-ul Fetch din JavaScript?

API-ul Fetch din JavaScript reprezintă o interfață pusă la dispoziție de navigatoarele web contemporane pentru a efectua solicitări din partea front-end-ului. Acesta se prezintă ca o alternativă modernă la vechiul AJAX XMLHttpRequest.

Funcționează ca o funcție globală numită `fetch`. Atunci când este apelată cu argumente, această funcție generează o promisiune care se concretizează într-un răspuns. Cu funcția `fetch`, se pot realiza diverse tipuri de cereri HTTP.

Avantajele API-ului Fetch în comparație cu alte metode

  • Oferă o interfață mai simplă și mai intuitivă, facilitând învățarea și utilizarea sa. Prin urmare, codul dumneavoastră va fi mai clar atunci când utilizați API-ul Fetch. XMLHttpRequests este mai complex, iar codul nu este la fel de curat ca atunci când este folosit API-ul Fetch.
  • Permite utilizarea promisiunilor, ceea ce facilitează scrierea unui cod asincron mai structurat. XMLHttpRequest nu le acceptă, fiind necesară adăugarea de callback-uri la gestionarii de evenimente. În funcție de preferințe, API-ul JavaScript Fetch ar putea fi preferat.
  • Este integrat nativ în browser. Astfel, nu este necesară includerea de biblioteci suplimentare pentru a face solicitări. Bibliotecile adiționale ar mări dimensiunea pachetului JavaScript și ar încetini performanța site-ului.

Cum se utilizează API-ul Fetch

În această secțiune, vom discuta despre realizarea diferitelor tipuri de solicitări folosind API-ul Fetch din JavaScript. Puteți folosi orice editor de cod preferat, dar asigurați-vă că rulați codul în browser. Eu îl voi rula direct într-o etichetă de script din interiorul unui fișier HTML.

O solicitare GET simplă

Vom începe prin a învăța cum se efectuează o cerere GET simplă. Structura codului este următoarea:

fetch(url)

Astfel, dacă dorim să extragem date despre postări de la API-ul JSON Placeholder, procesul ar fi următorul:

fetch('https://jsonplaceholder.typicode.com/posts');

Apelul funcției va returna o promisiune, care va rezolva răspunsul API sau va genera o eroare, în cazul în care aceasta apare. Prin urmare, pentru a accesa răspunsul, vom utiliza cuvântul cheie `await`. Totuși, cuvântul cheie `await` poate fi utilizat doar într-o funcție asincronă.

Așadar, vom încapsula apelul funcției `fetch` într-o funcție asincronă și o vom apela. Pentru cei mai puțin familiarizați, există un ghid detaliat despre JavaScript asincron. În orice caz, codul arată așa:

async function getData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    console.log(response);
}

getData();

Dacă rulați codul de mai sus, ar trebui să obțineți un rezultat similar cu următorul:

Rezultatul indică faptul că funcția `fetch` a returnat un obiect de tip `Response`. Acest obiect conține proprietăți precum starea, headerele și corpul. Datele de răspuns sunt stocate în corp sub forma unui șir JSON. Prin urmare, trebuie să extragem șirul și să îl analizăm în format JSON pentru a obține datele ca obiect JavaScript.

Din fericire, obiectul `Response` conține o metodă utilă numită `json()`. Această metodă citește corpul răspunsului și încearcă să analizeze șirul ca JSON. Aceasta returnează o promisiune care se rezolvă într-un obiect analizat din JSON.

Totuși, această metodă va genera o eroare dacă corpul nu este un șir JSON valid. Prin urmare, ar trebui să analizăm JSON-ul doar dacă răspunsul are codul de stare 200.

Deci, codul pentru a obține postări va fi următorul:

async function getData() {
    const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts"
    );

    if (response.status == 200) {
        const posts = await response.json();
        console.log(posts);
    } else {
        console.log("Something went wrong:", response.status);
    }
}
getData();

Executarea codului de mai sus va genera următoarele rezultate:

Acesta reprezintă un array format din o sută de postări.

Unele endpoint-uri API solicită antete. Aceste antete ar putea fi folosite, de exemplu, pentru autorizare. API-ul Fetch din JavaScript oferă o metodă simplă de a trimite antete ca parte a cererii. Este necesară includerea unui argument de tip opțiuni în apelul funcției `fetch` pentru a specifica anteturile.

fetch(url, options);

Astfel, exemplul nostru anterior ar arăta acum în felul următor:

async function getData() {
    const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts", {
             headers: {
                 'x-auth': '<your auth token>'
             }
         }
    );

    if (response.status == 200) {
        const posts = await response.json();
        console.log(posts);
    } else {
        console.log("Something went wrong:", response.status);
    }
}
getData();

Deoarece API-ul JSONPlaceholder nu solicită un antet de autorizare, codul de mai sus va funcționa ca înainte. Totuși, este important de reținut că există opțiunea de a transmite antete.

Transmiterea altor opțiuni

Pe lângă antete, se pot transmite multe alte opțiuni funcției `fetch`. Cele mai des utilizate sunt metoda de solicitare și opțiunile pentru corpul cererii.

Vom efectua o cerere POST către API-ul JSONPlaceholder pentru a demonstra cum se transmit ambele opțiuni. Iată codul pentru a realiza acest lucru:

async function getData() {
    const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts", {
             method: 'POST',
             body: JSON.stringify({ 
                 title: 'Fetch API',
                 body: 'Lorem Ipsum',
                 userId: 1,
             })
        }
    );

    if (response.status == 200) {
        const posts = await response.json();
        console.log(posts);
    } else {
        console.log("Something went wrong:", response.status);
    }
}
getData();

În obiectul nostru de opțiuni, am specificat metoda de solicitare și corpul ca proprietăți. Pentru ambele proprietăți, am furnizat argumente sub formă de șir. Am folosit șirul „POST” pentru metoda de solicitare, deoarece dorim să executăm o cerere POST. De asemenea, am specificat un șir JSON pentru proprietatea `body`. Acest șir JSON este generat prin transformarea într-un șir a unui obiect cu proprietățile necesare.

Rularea acestui cod în browser va produce următoarele rezultate:

Rezultatul este un obiect care include ID-ul pe care tocmai l-am primit de la server. Aici este o resursă excelentă pentru a vedea lista completă de opțiuni care pot fi transmise.

Erori la utilizarea API-ului Fetch din JavaScript

#1. Erori de rețea

În timpul executării cererilor de rețea, este normal să întâlnim erori. Funcția `fetch` returnează o promisiune care se rezolvă la rezultat sau se respinge când apare o eroare de rețea. Prin urmare, este important să încapsulăm codul într-un bloc try/catch pentru a gestiona corespunzător erorile de rețea.

#2. Alte erori

Pe lângă erorile de rețea, se pot întâlni și alte tipuri de erori, cum ar fi erorile 404, 403 și 500. Funcția `fetch` nu generează o eroare atunci când apar aceste erori. Așadar, trebuie să le verificăm prin analiza codului de stare al răspunsului. De exemplu, în exemplele anterioare, am încercat să analizăm corpul răspunsului doar când codul de stare era 200.

#3. Erori CORS

Alte erori frecvente sunt erorile CORS. CORS reprezintă „Cross-Origin Resource Sharing”. O origine este combinația unică dintre protocol, host și port a unui server. De exemplu, site-ul meu ar putea rula pe localhost, host-ul, pe portul 5500, portul, și ar putea fi accesat prin HTTP, protocolul. Astfel, originea acelui site ar fi http://localhost:5500.

Același site web va face o solicitare API către https://jsonplaceholder.typicode.com, o origine diferită. Prin urmare, aceste două origini, localhost și JSONPlaceholder, partajează resurse. Aceasta este partajarea resurselor între origini. Totuși, serverul API trebuie să activeze CORS pentru a funcționa. Acest lucru nu este mereu valabil. Soluția pentru gestionarea unor astfel de erori ar fi efectuarea solicitărilor printr-un server proxy compatibil CORS.

Suport pentru browsere

API-ul fetch este o caracteristică destul de modernă. Conform CanIUse.com, aproximativ 95% dintre utilizatorii globali au browsere care îl acceptă.

Concluzie

API-ul Fetch din JavaScript reprezintă o metodă mai elegantă și mai clară sintactic de a scrie cod frontend care efectuează cereri API. Totuși, având în vedere suportul limitat pentru anumite browsere, ar putea fi necesară utilizarea de biblioteci client HTTP alternative.