В этой главе вы узнаете, как работать с HTTP-запросами в среде Aurelia.
Шаг 1 — Создать представление
Давайте создадим четыре кнопки, которые будут использоваться для отправки запросов нашему 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>
Шаг 2 — Создание View-модели
Для отправки запросов на сервер Aurelia рекомендует получить клиент. Мы создаем функции для каждого запроса (GET, POST, PUT и 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); }); } }
Мы можем запустить приложение и нажать кнопки GET , POST , PUT и DEL соответственно. В консоли видно, что каждый запрос успешен, а результат записывается в журнал.