Aurelia - HTTP
In questo capitolo imparerai come lavorare con le richieste HTTP nel framework Aurelia.
Passaggio 1: creare una vista
Creiamo quattro pulsanti che verranno utilizzati per inviare richieste alla nostra API.
app.html
<template>
<button click.delegate = "getData()">GET</button>
<button click.delegate = "postData()">POST</button>
<button click.delegate = "updateData()">PUT</button>
<button click.delegate = "deleteData()">DEL</button>
</template>
Passaggio 2: creare un modello di visualizzazione
Per inviare richieste al server, Aurelia consiglia fetchcliente. Stiamo creando funzioni per ogni richiesta di cui abbiamo bisogno (GET, POST, PUT e DELETE).
import 'fetch';
import {HttpClient, json} from 'aurelia-fetch-client';
let httpClient = new HttpClient();
export class App {
getData() {
httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => {
console.log(data);
});
}
myPostData = {
id: 101
}
postData(myPostData) {
httpClient.fetch('http://jsonplaceholder.typicode.com/posts', {
method: "POST",
body: JSON.stringify(myPostData)
})
.then(response => response.json())
.then(data => {
console.log(data);
});
}
myUpdateData = {
id: 1
}
updateData(myUpdateData) {
httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1', {
method: "PUT",
body: JSON.stringify(myUpdateData)
})
.then(response => response.json())
.then(data => {
console.log(data);
});
}
deleteData() {
httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1', {
method: "DELETE"
})
.then(response => response.json())
.then(data => {
console.log(data);
});
}
}
Possiamo eseguire l'app e fare clic GET, POST, PUT e DELpulsanti, rispettivamente. Possiamo vedere nella console che ogni richiesta ha esito positivo e il risultato viene registrato.