Chuyển đến nội dung chính

Caching Http Request trong Angular với Rxjs

Thông thường khi làm việc với ứng dụng, chúng ta tạo HTTP request để truy cập data từ API. Đôi khi chúng ta gọi đến một API nhiều lần trong một khoảng thời gian nhất định, caching được sử dụng để tránh việc lặp lại request đến server. Có nhiều cách để thực hiện việc caching, trong bài này tôi sẽ sử dụng RxJs bởi vì nó đơn giản.

Đầu tiên chúng ta khởi tạo project cùng 2 component là ImageListComponent ImageDetailComponent. Hai component này có chung nhiệm vụ hiển thị list các image ra màn hình




Bắt đầu bằng việc tạo Angular service, HttpClient service trong angular gọi đến link api http://5c6e54864fa1c9001424233c.mockapi.io/api/image (bạn có thể tạo api test ở MockAPi)


Như ban đầu chúng ta đề cập, 2 component trên sẽ cùng gọi đến cùng một API, vì thế trong hàm getImageList() chúng ta sẽ thực hiện việc lưu trữ data bằng cách subscribing observable được trả về. Khi phương thức getImageList() được gọi, chúng ta trả về dữ liệu được lưu trữ trong một Observable. Chúng ta sử dụng 'of' trong RxJS (bạn có thể tham khảo ở Observable.of ). Luồng xử lý sẽ là: check nếu data tồn tại => trả về data đã được lưu trữ, nếu không sẽ thực hiện request mới.

Trong 2 component ImageListComponent và ImageDetailComponent sẽ gọi phương thức getImageList() để hiện thị dữ liệu ra view.





Kết quả

 ImageDetailComponent

ImageListComponent

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Đa ngôn ngữ trong Angular  Trong phần này mình sẽ thêm chức năng đa ngôn ngữ cho project angular. Chúng ta sử dụng thư viện @ngx-translate cho bài viết, bạn có thể tham khảo ở  @ngx-translate   Trước tiên chúng ta cần tạo project và import thư viện: ng new angular-translate cd  angular-translate npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save Sau đó chúng ta import thư viện  TranslateModule  vào app.module.ts: -Tiếp đó chúng ta tao 2 file en.json và vn.json vào thư mục /assets/i18n/en.json -Tiếp đó chúng ta thiết lập sự kiện click chuyển ngôn ngữ trong file app.component.ts: - Để hiển thị trên giao diện, chúng ta sử dụng service TranslateService đã được khai báo trong contructor() như một pipe: Kết quả : Bằng việc truyền value vào event switchLanguage() chúng ta có thể thay đổi ngôn ngữ của trang Như vậy chúng ta đã hoàn thành xong việ...
Đăng nhận xét
Đọc thêm
  Giới thiệu về Spring Integration Giới thiệu      Spring Integration là một framework cho phép việc cấu hình động các tầng của hệ thống.  Nó giúp cho việc cấu hình linh động, dàn xếp các module trở nên độc lập, dễ dàng thay đổi phù hợp mục đích nâng cấp (xem hình 1 ) Hình - 1    Spring Integration cho phép nhắn tin giữa các module dựa trên Spring-based applications và nó hỗ trợ tích hợp với các hệ thông bên ngoài thông qua bộ khai báo. Mục đích chính của Spring Integration là cung cấp một mô hình đơn giản để xây dựng các giải pháp tích hợp doanh nghiệp trong khi vẫn duy trì cac mối liên kết cần thiết để có thể kiểm tra, bảo trì.    Nó đưa khái niệm về POJO lên thêm một bước nữa, nơi mà POJO được kết nối với nhau bằng cách sử dụng một mô hình nhắn tin và các thành phần riêng lẻ không thể nhận biết được các thành phần khác trong ứng dụng. Một ứng dụng được xây dựng bằng cách lắp ráp các thành phần, có thể tái sử dụng, tạ...
Đăng nhận xét
Đọc thêm
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ộ...
Đăng nhận xét
Đọc thêm