Aurelia - HTTP

Trong chương này, bạn sẽ học cách làm việc với các yêu cầu HTTP trong khung công tác Aurelia.

Bước 1 - Tạo chế độ xem

Hãy tạo bốn nút sẽ được sử dụng để gửi yêu cầu tới API của chúng tôi.

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>

Bước 2 - Tạo mô hình dạng xem

Để gửi yêu cầu đến máy chủ, Aurelia khuyến nghị fetchkhách hàng. Chúng tôi đang tạo các chức năng cho mọi yêu cầu chúng tôi cần (GET, POST, PUT và 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);
      });
   }
}

Chúng tôi có thể chạy ứng dụng và nhấp vào GET, POST, PUT và DELcác nút tương ứng. Chúng ta có thể thấy trong bảng điều khiển rằng mọi yêu cầu đều thành công và kết quả được ghi lại.