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.
Refs
In this chapter, you will see some simple examples of Aurelia refs. You can use it to create a reference to a particular object. You can create a reference to elements or attributes, as seen in the following table.
Reference Table
| Sr.No | Example & Description |
|---|---|
| 1 | ref = “myRef”Used for creating a reference to DOM element. |
| 2 | attribute-name.ref = “myRef”Used for creating a reference to custom attribute’s view-model. |
| 3 | view-model.ref = “myRefUsed for creating a reference to custom element’s view-model. |
| 4 | view.ref = “myRef”Used for creating a reference to custom elements view instance. |
| 5 | rcontroller.ref = “myRef”Used for creating a reference to custom element’s controller instance. |
In the following example, we will create a reference to the input element. We will use the default class syntax as a view-model.
app.js
export class App { }
We are creating a reference to the input element by adding the ref = “name” attribute.
app.html
<template>
<input type = "text" ref = "name"><br/>
<h3>${name.value}</h3>
</template>
When we run the app, we will see that the text entered into the input field is rendered on the screen.
Next Topic : Click Here