Get data from an API service in Angular 

1. Promises và Observables 

Promises:

    Là một đối tượng được lập trình để thao tác bất đồng bộ trong Javascript. Nó đại diện cho một giá trị mà chúng ta muốn thao tác nhưng có thể hiện tại chưa có sẵn nhưng trong tương lại nó có giá trị trong promise đó.

Một số đặc điểm của promise là:

- Chỉ trả về một giá trị duy nhất, đó có thể là object, array, number....

- Không thể cancel được request

- Được khởi tạo ngay mặc dù chưa được đăng ký, miễn là bạn khai báo một promise thì nó sẽ chạy contructor.

Promise có ba trạng thái :

• Pending: khi khởi tạo đối tượng promise, gọi một request đến server.
• Fulfilled: thao tác gọi đến server thành công sẽ chuyển từ pending sang fulfilled qua phương thức then() (có thể xử lý kết quả thành công trong phương thức then() ).
• Rejected: khi request đến server bị lỗi, có thể dùng .catch() để bắt lỗi.

Observables:

    Tương tự như promise nhưng có một số ưu điểm khác. Nó như một ống dữ liệu, chúng ta có thể đẩy nhiều dữ liệu qua ống này. Nó là một tính năng của ES7, hoặc chúng ta có thể sử dụng nó như một thư viện ngoài thông qua RxJS

Một số đặc điểm của Observable là:

• Trả về một hoặc nhiều giá trị.
• Có thể cancel request 
• Chỉ được khởi tạo khi có đăng ký đến observable đó (có listener)
• Có nhiều thao tác xử lý với dữ liệu như filter, map, take, debounce...

2. Sử dụng Observables để request một api từ server và hiển thị ra 

    Đầu tiên chúng ta vào trang  mockapi.io tạo một api theo format có sẵn, có thể chọn kiểu dữ liệu theo mong muốn.
- Đặt tên cho đường dẫn api:

-Khởi tạo dữ liệu

Kết quả chúng ta có đường link api theo format Json

Tiếp đó chúng ta tiến hành khởi tạo project Angular

Đầu tiên chúng ta cần import HttpClientModule vào app.module.ts. Việc này để đăng ký http service với Angular injector 

test.ts

   Chúng ta khai báo một interface để đón dữ liệu trả về từ server, nó bao gồm các field mà chúng ta đã tạo ở trên.

test.service.ts

   Để sử dụng thư viện HttpClientModule trong file test.service.ts chúng ta cần khai báo nó như một dependency trong hàm contructor. Chúng ta sử dụng link api được tạo để giả lập giữ liệu được server trả về. Trong hàm getData() chúng ta sử dụng phương thức get trong rest api. Trong phương thức get kiểu trả về là Observable nên trong phương thức getData() và nó cần trả về một array các object, vì vậy chúng ta cần return một observable có type là một array Test[].

test.service.component.ts

Trong component chúng ta có instance của testService và dùng nó để gọi đến method getData() ở test.service.ts. Method getData() return một Observable nên để đón nhận dữ liệu chúng ta cần subscrise nó, sử dụng property binding để truyền dữ liệu ra view.

test.compnent.html

Việc cuối cùng là tạo ra một bảng để hiển thị ra dữ liệu. Ở đây tôi đang sử dụng Bootstrap 4 để trông đẹp mắt hơn, việc này đồng nghĩa với việc bạn phải import bootstrap vào project của 

Khởi chạy server bằng lệnh: ng serve -o và xem kết quả: