Effettuare chiamate asincrone con la libreria axios

Con l’avvento di strumenti avanzati per il front-end come React, Angular o Vue.js dopo un po’ che si studia sorge una domanda spontanea (sopratutto se “arrivate” da jQuery o framework similare). Ok ma le chiamate ajax? Molto spesso infatti dovrete usare librerie esterne per gestire le call ajax asincrone.

Ovvio l’alternativa sarebbe anche quella di utilizzare vanilla javascript, ma questo vi pone alcuni limiti strutturali in vista di eventuali ampliamenti futuri del progetto, e – più in generale – vi da meno controllo sulla gestione delle chiamate.

Approfondendo la conoscenza con Vue.js che reputo davvero il TOP (vedi articolo dedicato a breve), la documentazione ufficiale consiglia l’utilizzo di AXIOS come librerie ufficiosa per gestire la call ajax. Potete trovare l’approfondimento sul sito ufficiale a questo indirizzo.

Axios è un derivato del modulo $http Service usato da Angular che è stato “staccato” dal framework di casa Google per essere utilizzato in standalone. Un sinonimo di affidabilità e sicurezza non da poco.

Uno dei punti a favore di axios rispetto ai suoi competitor è la facilità d’uso. Non siete obbligati ad esempio ad usare script per la gestione di dipendenze, ma se lo desiderate potete innestare lo script direttamente dentro la vostra pagina.

Una volta inserito lo script della libreria per fare una richiesta, ad esempio, GET possiamo agire come segue:

axios.get('/url-get?ID=12345')
  .then(function (response) {
    // success
    console.log(response);
  })
  .catch(function (error) {
    // error
    console.log(error);
  })
  .then(function () {
    // esempio di funzione che verrà eseguita sempre, sia in caso di errore che in caso di success
  });

Ovviamente possiamo impostare i parametri get non all’interno dell’url ma dentro il codice usando l’opzione “params”

axios.get('/url-get', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });  

Ovviamente la sintassi cambia a seconda del metodo http che vogliamo utilizzare, per le chiamate POST ad esempio:

axios({
  method: 'post',
  url: '/test-post',
  data: {
    firstName: 'Riccardo',
    lastName: 'Mel'
  }
});

//Oppure

axios.post('/test-post', {
    firstName: 'Riccardo',
    lastName: 'Mel'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
 });

Ecco una lista rapida dei metodi HTTP:

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

Ovviamente sono presenti diverse opzioni da passare dentro l’array di configurazione della libreria.

Tra i più interessanti:

• headers: permette di passare degli header alla richiesta. Utilissimo in svariate occasioni.
• timeout: millisecondi dopo il quale fare l’abort della call.
• auth: utile per passare informazioni di autenticazione alla richiesta.
• xsrfCookieName e xsrfHeaderName permettono di avere controllo completo sulle funzionalità XSRF
• proxy: in caso di configurazioni server particolari (load balancer o proxy server) potrebbe fare al caso vostro una soluzione integrata per passare le informazioni di proxy.

 Lista di tutti i parametri configurabili.

Problema con le chiamate POST e axios

Uno dei problemi di AXIOS riguarda le chiamate POST. Vi capiterà ad esempio di ricevere errori di vario tipo in fase di call.

Questo perchè rispetto a jQuery che ha un params-serializer interno qui lo dovrete fare voi esternamente e passare i valori post allo script già “a posto”.

Per farlo potete seguire questo semplice script-guida.

const params = new URLSearchParams();
params.append('id', tuavariabileID); // passo le variabili da passare via POST
params.append('test', tuavariabileTEST); // passo le variabili da passare via POST
axios.post('/url-post',params).then(function (response) {
console.log("OK");
})
.catch(function (error) {
  console.log("ERRORE");
});

NOTA BENE: Se utilizzate Laravel (ma ormai è una nota generale), ricordatevi di includere anche il parametro TOKEN per la CSRF protection. Se non sai di cosa parlo leggi questa guida ufficiale.

Conclusioni

Una libreria sicuramente molto valida, semplice da usare, ma dalle grandi potenzialità. Da provare almeno una volta, anche se siete puristi del codice vanilla.

Piccolo disclamer finale: controlla il grado di supporto browser di AXIOS sulla pagina ufficiale di GITHUB  – prima di utilizzarlo – e controlla che si adatti alle esigenze del tuo pubblico.

Image credits “javascript” disponibile su Shutterstock