- Aurelia Tutorial
- Aurelia - Home
- Aurelia - Overview
- Aurelia - Environment Setup
- Aurelia - First Application
- Aurelia - Components
- Aurelia - Component Lifecycle
- Aurelia - Custom Elements
- Aurelia - Dependency Injections
- Aurelia - Configuration
- Aurelia - Plugins
- Aurelia - Data Binding
- Aurelia - Binding Behavior
- Aurelia - Converters
- Aurelia - Events
- Aurelia - Event Aggregator
- Aurelia - Forms
- Aurelia - HTTP
- Aurelia - Refs
- Aurelia - Routing
- Aurelia - History
- Aurelia - Animations
- Aurelia - Dialog
- Aurelia - Localization
- Aurelia - Tools
- Aurelia - Bundling
- Aurelia - Debugging
- Aurelia - Community
- Aurelia - Best Practices
- Aurelia Useful Resources
- Aurelia - Quick Guide
- Aurelia - Useful Resources
- Aurelia - Discussion
Aurelia - HTTP
In this chapter, you will learn how to work with HTTP requests in Aurelia framework.
Step 1 - Create a View
Let's create four buttons that will be used for sending requests to our 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>
Step 2 - Create a View-model
For sending requests to the server, Aurelia recommends fetch client. We are creating functions for every requests we need (GET, POST, PUT and 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); }); } }
We can run the app and click GET, POST, PUT and DEL buttons, respectively. We can see in the console that every request is successful, and the result is logged.
Advertisements
To Continue Learning Please Login
Login with Google