Aurelia-http
提供:Dev Guides
アウレリア-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>
ステップ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);
});
}
}
アプリを実行して、それぞれ GET 、 POST 、 PUT および DEL ボタンをクリックします。 コンソールでは、すべてのリクエストが成功し、結果が記録されていることがわかります。