VueJS: Effettuare chiamate GET in async

In questo breve -brevissimo- articolo vedremo come scrivere in VueJS delle chiamate di tipo HTTP GET in async e mostrare i dati nel client.
Nel seguente esempio scriveremo MyComponent separandolo in due file:
- MyComponent.vue: conterra’ solamente la parte script
- MyComponent.vue.html: conterra’ solamente la parte html
MyComponent.vue.html
Come prima cosa potrete vedere nel seguente blocco di codice, andremo a mostrare a video i valori di items se presenti. Allo stesso modo andremo a mostrare eventuali errors ricevuti dalla nostra chiamata verso l’API.
|
|
Se la domanda che vi frulla per la testa e’ come fare ad ottenere items ed errors vi bastera’ leggere la seguente sezione
MyComponent.vue
Nel file di script andremo come prima operazione ad importare axios per poterlo poi utilizzare all’interno del create chiamando il nostro this.apiUrl
|
|
Se axios.get ottiene esito positivo, troveremo i valori all’interno di this.items
Se -in caso contrario- axios.get genera errore (ad esempio la mancanza di rete) aggiungeremo l’errore a this.errors
Ora manca l’ultima domanda: In tutto questo apiUrl che valore assume?
App.vue
All’interno de di App.vue quando andremo a chiamare MyComponent aggiungeremo apiUrl in modo da passare il valore a MyComponent.vue
|
|
Semplice no?