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

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 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.