Vai al contenuto
Home » Notes » Come fare una chiamata API in JavaScript con esempi

Come fare una chiamata API in JavaScript con esempi

copertina guida come fare una chiamata api in javascript

Esistono diversi modi per fare una chiamata API in JavaScript, e in questa semplice guida voglio riassumerli tutti, sottolineando i vantaggi e gli svantaggi di ogni metodo. Questa guida su come fare richieste o chiamate API in js contiene anche snippet ed esempi di codice. Per tutti i modi di fare una chiamata API ti mosterò un esempio facendo una chiamata all’API gratuita di TheCocktailDB. 🍹

Come fare una chiamata API in Javascript

XMLHttpRequest

Il primo metodo è quello di usare XMLHttpRequest(). Questo è il modo “classico” di fare una chiamata API. Utilizza l’oggetto XMLHttpRequest , anche abbreviato con XHR, che è incorporato nel browser. Compare per la prima volta in Firefox nel 2002, quindi è un metodo un po’ datato ma supportato da tutti i browser attuali.

Esempio chiamata API con metodo XMLHttpRequest:

jQuery (AJAX)

jQuery è una libreria JavaScript che fa della leggerezza e della facilità d’uso i suoi punti di forza. L’obiettivo di jQuery è proprio quello di rendere più semplice ed efficiente la manipolazione del DOM, l’handling degli eventi, le animazioni e anche le chiamate API. jQuery offre infatti il metodo ajax per fare richiest HTTP asincrone.

Sia chiaro, il metodo ajax è un superset dell’oggetto XMLHttpRequest che abbiamo visto prima, ma anche se “sotto il cofano” c’è sempre XMLHttpRequest, con ajax è un po’ più facile, chiaro ed elegante scrivere una chiamata API.

esempio chiamata API con jQuery ajax

Fetch

fetch API è una interfaccia che permette di fare operazioni di fetching di risorse, anche sulla rete. Vuole essere una evoluzione di XMLHttpRequest, ma più potente e flessibile. Si basa sul meccanismo delle promesse. Fetch non è supportato dai browser più vecchi.

esempio chiamata API con fetch()

Axios

Axios è un client HTTP basato sul meccanismo delle promesse per i browser e per node.js. Si può usare anche con i framework più diffusi come React, Vue, Angular.

Axios permette di fare richieste HTTP sfruttando i suoi metodi get() , post(), put() e regolando:

  • con il metodo then(), il comportamento da eseguire in caso di risposta di successo da parte dell’API
  • con il metodo catch() il comportamento da eseguire nel caso in cui si verifichi un errore

Esempio chiamata API con Axios:

Quale è il miglior metodo per fare una chiamata API?

Il miglior metodo dipende da che tipo di chiamata devi fare, dei browser che vuoi supportare e altro.
A parer mio il miglior modo per fare una chiamata API è jQuery ajax, ma mi piace anche Axios. Ti suggerisco di evitare XMLHttpRequest, un metodo datato e non adoro nemmeno Fetch perchè l’error handling è un po’ macchinoso.

Prosegui la lettura con: sai come si documenta la tua API con Swagger e OpenAPI?

Grazie per la lettura!

Fonti:
developer.mozilla.org e tutte le pagine che ho linkato nella guida.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *