Aurelia HTTP

In the previous article, we discussed Aurelia Forms. In this tutorial we will learn Aurelia HTTP.

HTTP requests in Aurelia framework are done by:

Creating the View

For example, let’s create four buttons that is used to send 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>

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);
     });
  }
 
}

Four buttons will be created and can be used respectively. The console will log every successful request.

On the next tutorial, we will discuss Aurelia App Security.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.