Aurelia - HTTP

In diesem Kapitel erfahren Sie, wie Sie mit HTTP-Anforderungen im Aurelia-Framework arbeiten.

Schritt 1 - Erstellen Sie eine Ansicht

Lassen Sie uns vier Schaltflächen erstellen, die zum Senden von Anforderungen an unsere API verwendet werden.

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>

Schritt 2 - Erstellen Sie ein Ansichtsmodell

Für das Senden von Anfragen an den Server empfiehlt Aurelia fetchKlient. Wir erstellen Funktionen für alle Anforderungen, die wir benötigen (GET, POST, PUT und 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);
      });
   }
}

Wir können die App ausführen und klicken GET, POST, PUT und DELTasten. Wir können in der Konsole sehen, dass jede Anfrage erfolgreich ist und das Ergebnis protokolliert wird.