Aurelia - HTTP
En este capítulo, aprenderá a trabajar con solicitudes HTTP en el marco de Aurelia.
Paso 1: crear una vista
Creemos cuatro botones que se utilizarán para enviar solicitudes a nuestra 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>
Paso 2: crear un modelo de vista
Para enviar solicitudes al servidor, Aurelia recomienda fetchcliente. Estamos creando funciones para cada solicitud que necesitamos (GET, POST, PUT y 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);
});
}
}
Podemos ejecutar la aplicación y hacer clic GET, POST, PUT y DELbotones, respectivamente. Podemos ver en la consola que cada solicitud es exitosa y el resultado se registra.