API-ul JavaScript Fetch explicat

JavaScript Fetch API oferă o modalitate intuitivă de a face solicitări de la clientul aplicației care rulează în browser.

Este ușor de utilizat și folosește sintaxa JavaScript modernă. Acest articol este un ghid despre cum să utilizați API-ul Fetch.

Ce este JavaScript Fetch API?

JavaScript Fetch API este o interfață oferită de browserele moderne pentru a face solicitări de la front-end. Oferă o alternativă la vechiul AJAX XMLHttpRequest.

Este disponibil ca o funcție globală numită fetch. Când este apelată cu argumente, această funcție returnează o promisiune care se rezolvă într-un răspuns. Cu funcția de preluare, puteți face tot felul de solicitări HTTP.

Avantajele Fetch API față de alte metode

• Are o interfață mai simplă și mai intuitivă, care este ușor de învățat și utilizat. Drept urmare, codul dvs. devine mai curat atunci când utilizați API-ul Fetch. XMLHttpRequest este mai complicat, iar codul dvs. nu este la fel de curat ca atunci când utilizați API-ul Fetch.
• Acceptă promisiunile, ceea ce vă permite să scrieți cod asincron mai curat. XMLHttpRequest nu le acceptă; în schimb, trebuie să adăugați apeluri înapoi la gestionatorii de evenimente. În funcție de preferințele dvs., este posibil să preferați API-ul JavaScript Fetch.
• Este suportat nativ în browser. Aceasta înseamnă că nu trebuie să adăugați biblioteci suplimentare pentru a face solicitări. Bibliotecile suplimentare vor mări pachetul JavaScript și vor încetini site-ul.

Folosind API-ul Fetch

Această secțiune va trata efectuarea diferitelor solicitări folosind API-ul JavaScript Fetch. Pentru a scrie codul, puteți folosi orice editor preferați. Doar asigurați-vă că rulați codul în browser. Îl voi rula într-o etichetă de script într-un fișier HTML.

O cerere GET simplă

În primul rând, vom învăța să facem o cerere simplă de obținere. Codul pentru a face acest lucru urmează această structură:

fetch(url)

Prin urmare, dacă dorim să preluăm postări din API-ul JSON Placeholderați proceda după cum urmează:

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

Apelul funcției va returna o promisiune, rezolvând răspunsul API sau o eroare dacă a fost întâlnită una. Prin urmare, pentru a accesa răspunsul, vom folosi cuvântul cheie await. Dar putem folosi cuvântul cheie await doar într-o funcție asincronă.

Deci, vom împacheta funcția fetch cu o funcție asincronă și vom apela asta. Dacă nu sunteți familiarizat cu toate acestea, iată un ghid detaliat despre JavaScript asincron. Oricum, codul:

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 următoarea ieșire în rezultatul dvs.

Ieșirea indică faptul că funcția de preluare a returnat un obiect Response. Acest obiect are proprietăți care includ starea, anteturile și corpul. Datele de răspuns sunt stocate ca șir JSON în corp. Prin urmare, trebuie să extragem șirul și să analizăm JSON pentru a obține datele ca obiect JavaScript.

Din fericire, obiectul Response are o metodă la îndemână numită json(). Această metodă citește corpul răspunsului și încearcă să analizeze șirul ca JSON. Returnează o promisiune care se rezolvă la un obiect analizat din JSON.

Cu toate acestea, această metodă va genera o eroare dacă corpul nu este un șir JSON valid. Prin urmare, ar trebui să analizăm JSON numai dacă răspunsul are un cod 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();

Rularea codului de mai sus va produce următoarele rezultate:

Aceasta este o serie de o sută de postări.

Unele puncte finale API necesită antete. Aceste anteturi ar putea fi folosite pentru autorizare, de exemplu. API-ul JavaScript Fetch oferă o modalitate ușoară de a trimite anteturi ca parte a solicitării. Trebuie să transmiteți un argument opțiuni apelului funcției de preluare pentru a specifica anteturile.

fetch(url, options);

Deci, exemplul nostru anterior ar arăta acum astfel:

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 necesită un antet de autorizare, codul de mai sus va funcționa ca înainte. Cu toate acestea, este important să știți că există opțiunea de a trece anteturi.

Trecerea altor opțiuni

Pe lângă transmiterea antetelor, puteți trece multe alte opțiuni la funcția de preluare. Cele două opțiuni pe care le vei trece foarte mult sunt metoda de solicitare și opțiunile pentru corpul solicitării.

Vom face o solicitare POST către API-ul JSONPlaceholder pentru a demonstra că le-am trecut pe ambele. Iată codul pentru a face asta:

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 opțiuni, am specificat metoda de solicitare pe care dorim să o folosim și corpul ca proprietăți. Pentru ambele proprietăți, am furnizat argumente șir. Am furnizat șirul „POST” pentru metoda de solicitare, deoarece dorim să facem o solicitare POST. De asemenea, am furnizat un șir JSON pentru proprietatea body. Acest șir JSON este format prin stringerea unui obiect cu proprietățile necesare.

Rularea acestui cod în browser are următoarele rezultate:

Ieșirea este un obiect care conține ID-ul pe care tocmai l-am primit de la server. Aici este o mare resursă pentru lista completă de opțiuni pe care le puteți transmite.

Erori la utilizarea API-ului JavaScript Fetch

#1. Erori de rețea

La efectuarea solicitărilor de rețea, este obișnuit să întâmpinați erori. Funcția de preluare returnează o promisiune care se rezolvă la rezultat sau respinge atunci când a fost întâlnită o eroare de rețea. Prin urmare, trebuie să ne înfășurăm codul într-un bloc try/catch. Pentru a gestiona cu grație erorile de rețea.

#2. Alte erori

Pe lângă erorile de rețea, este posibil să întâmpinați și alte erori, cum ar fi 404s, 403s și 500s. Funcția de preluare nu aruncă o eroare atunci când sunt întâlnite astfel de erori. Prin urmare, trebuie să le verificați verificând codul de stare a 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 pe care le veți întâlni sunt erorile CORS. CORS înseamnă Cross-Origin Resource Sharing. O origine este combinația unică a protocolului, gazdei și portului unui server. De exemplu, site-ul meu ar putea rula pe localhost, gazda, pe portul 5500, portul și poate fi servit prin HTTP, protocolul. Prin urmare, originea acelui site ar fi http://localhost:5500.

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

Suport pentru browser

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

Concluzie

API-ul JavaScript Fetch este o modalitate mai bună și mai elegantă din punct de vedere sintactic de a scrie frontend-uri care fac solicitări API. Având în vedere suportul limitat pentru browser, ați putea lua în considerare alte biblioteci client HTTP.