Aurelia-http

アウレリア-HTTP

この章では、AureliaフレームワークでHTTPリクエストを処理する方法を学びます。

ステップ1-ビューを作成する

APIにリクエストを送信するために使用される4つのボタンを作成しましょう。

appl

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

Copy

ステップ2-ビューモデルを作成する

サーバーにリクエストを送信する場合、Aureliaは fetch クライアントを推奨しています。 必要なすべてのリクエスト（GET、POST、PUT、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);
      });
   }
}

Copy

アプリを実行して、それぞれ GET 、 POST 、 PUT および DEL ボタンをクリックします。 コンソールでは、すべてのリクエストが成功し、結果が記録されていることがわかります。

Aurelia HTTPの例