Come funziona un API in Javascript

Che cosa realizzaremo in questo progetto ?

In questo progetto andremo a realizzare una semplicissima pagina web che andrà ad interagire con una API. L'Api in questione si chiama Cat Fact API

Durante la durata del progetto andremo a vedere tutti imetodi tramite i quali in Javascript è possibile effettuare una chiamata API, partendo dagli XHR Object fino ad arrivare all'uso di fetch.

XHR Object

XHR è una sigla che sta per XMLHttpRequest, il quale è un'oggetto built-in che permette di effetttuare chiamate in Javascipt.

Sicuramente non è il metodo più moderno ed intuitivo che esista, ma è importante avere un'infarinatura anche di questo in quanto potrebbe capitarvi di lavorare a progetti abbastanza obsoleti in cui questa sintassi è presente.

Come prima cosa è molto importante dichiarare una nuova istanza dell'oggetto.

const xhr = new XMLHttpRequest();

Successivamente inizializziamo il costruttore tramite il metodo open(), al quale passiamo il metodo HTTP (GET, PPOST, PUT), e l' url a cui effetuare la chiamata

xhr.open('GET', url);

A questo punto usiamo il metodo send() per effettuare la chiamata al server.

xhr.send();

Infine andimao ad effettuare dei controlli sullo stato della richiesta per capire come e se ritornare la risposta del server. Alla fine il codice risultà così:

const xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.send();
  7;
  xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;
    if (xhr.status === 200) {
      const { value: fact } = JSON.parse(xhr.responseText);
      content.textContent = fact;
    } else {
      console.log({
        status: xhr.status,
        text: xhr.statusText,
      });
    }
  };

Promise

A questo punto possiamo aggiungere le promise, quindi inizieremo ad utilizzare il .then e .catch() dopo la chiamata; chiederemo dei dati, li aspetteremo e quando arriveranno verranno gestiti.

Inseriamo tutto il blocco di codice scritto precedentemente in una funzione, la quale ritornerà una promise.

const getData = (url) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.send();
    xhr.onreadystatechange = () => {
      if (xhr.readyState !== 4) return;
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject({
          status: xhr.status,
          text: xhr.statusText,
        });
      }
    };
  });
}

A questo punto dovremo invocare questa funzione. Se i dati verranno restituiti correttamente entreremo nel .then e stamperemo in console ciò che ci viene restituito, altrimenti, tramite il catch andremo a catturare l'errore verificatosi e lo andremo a stampare in console.

getData(URL)
  .then((response) => console.log(response))
  .catch((err) => console.log(err));

Fetch dei dati utilizzando try/catch e async/await

Ora è arrivato il momento di riscrivere tutto con una sintassi più moderna, chiara e leggibile.

Andremo ad utilizzare il metodo fetch, al quale basta passare l'url in cui effettuare la chiamata.

Questo verrà effettuato all'interno di un blocco try/catch. Nel try effetuiamo la chiamata e gestiamo i dati, mentre nel catch ci occupiamo solamente della gestione degli errori.

Per risolvere le Promise andremo ad utilizzare le keywords async/await, tramite le quali ci basterà dichiarare la funzione come async, ed utilizzare await ogni volta che una promise va risolta.

In questo modo:

const getData = async () => {
  try {
    const data = await fetch(URL);
    const response = await data.json();
    console.log(response.fact);
  } catch (error) {
    console.log(error);
  }
};