Sự khác biệt giữa Promise và Observable trong Angular

Angular là một framework ứng dụng đơn trang dựa trên TypeScript được dùng để tạo app web năng động và đáp ứng. Nó là một trong số framework mạnh mẽ, phổ biến nhất. Một trong số tính năng chính của Angular là xử lý các hoạt động bất đồng bộ hiệu quả. Trong hoạt động bất đồng bộ, code không được triển khai tuần tự, thay vào đó, nó theo đa luồng.

Khi tạo một truy vấn HTTP, code tiếp theo sau truy vấn này không cần đợi nó hoàn tất triển khai. Truy vấn này có thể chạy đồng thời trên background mà không cần chặn code còn lại.

Một trong số trường hợp người dùng cần lập trình bất đồng bộ là khi tạo truy vấn HTTP để tìm nạp dữ liệu từ server, và các luồng dữ liệu thời gian thực nơi dữ liệu cần được truy xuất liên tục như trong thị trường chứng khoán, chạy đồng thời nhiều ứng dụng… Điều này có thể được thực hiện theo hai cách bằng Promise và Observable.

Promise

Promise đại diện cho một giá trị đơn lẻ trong tương lai mà hiện tại chưa có sẵn, nhưng dự kiến sẽ được giải quyết hoặc từ chối trong tương lai. Nó dễ đọc hơn và dễ bảo trì hơn trong môi trường không đồng bộ. Một đối tượng Promise có hai trạng thái có thể xảy ra, bao gồm: resolve và reject. Nó cung cấp một cách có cấu trúc để xử lý các trạng thái đã được giải quyết hoặc bị từ chối. Nó có “then()” để xử lý trạng thái đã được giải quyết và “catch()” để xử lý trạng thái bị từ chối. Giai đoạn này thường có 4 giai đoạn: fulfilled, rejected, pending, và settled.

• Pending: Hành động vẫn đang chờ, chưa hoàn thiện hoặc bị bỏ qua.
• Fulfilled: Trạng thái cho biết hoạt động bất đồng bộ đã được hoàn thành thành công.
• Rejected: Hành động bị bỏ qua hoặc thất bại.
• Settled: Kết quả được xác định thành công, hoàn thành hoặc từ chối.

Cú pháp:

const myPromise = new Promise((resolve, reject) => {

    // Hoạt động bất đồng bộ
    if (success) {
        resolve(response);
    } else {
        reject(error);
    }
});

myPromise.then(result => {

    // Xử lý success tại đây
}).catch(error => {

    // Xử lý lỗi tại đây
});

Ví dụ:

HTML:

<!-- app.component.html -->
<div> 
	<p>{{ data }}</p> 
</div>

JavaScript:

// app.component.ts 
import { Component, OnInit } from '@angular/core'; 

@Component({ 
	selector: 'app-root', 
	templateUrl: './app.component.html', 
	styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
	data: string = "data before promise response"; 

	ngOnInit() { 
	
		// Hoạt động bất đồng bộ với Promise 
		this.fetchDataWithPromise() 
			.then(data => { 
				this.data = data; 
			}) 
			.catch(error => { 
				console.error(error); 
			}); 
	} 

	fetchDataWithPromise(): Promise<string> { 
		return new Promise((resolve, reject) => { 
			setTimeout(() => { 
			
				// Truy xuất dữ liệu sau một số trì hoãn
				const success = true; 
				
				// Thay đổi sang false để mô phỏng lỗi nếu muốn
				if (success) { 
					resolve("Data fetched with a Promise"+ 
							" and displayed after 5 seconds"); 
				} else { 
					reject("Error occurred while fetching data"); 
				} 
			}, 5000); 
		}); 
	} 
}

Kết quả:

Nhược điểm của Promise

• Không thể hủy promise ở giữa quá trình thực hiện.
• Chỉ thực hiện promise 1 lần và không thể lặp lại.
• Không truy xuất được nhiều giá trị theo thời gian.
• Phức tạp khi hoạt động trên các ứng dụng lớn.

Observable

Một obsevable là khái niệm mạnh mẽ, nằm trong Angular qua thư viện RxJS. Chúng là một chuỗi giá trị có thể đạt được theo thời gian. Chúng có thể phát ra các giá trị đồng bộ hoặc không đồng bộ. Observable chủ yếu được dùng để xử lý các luồng dữ liệu thay đổi theo thời gian. Chúng có thể phát hành nhiều giá trị, không giống như promise. Chúng cung cấp một nhóm tuyệt vời những tính năng phức tạp như hủy, thử lại và gỡ lỗi. Phù hợp với các bản update tại thời gian thực như bảng thị trường chứng khoán.

Cú pháp

import { Observable } from 'rxjs';

const myObservable = new Observable(observer => {

    // Hoạt động bất đồng bộ
    if (success) {
        observer.next(result);
    } else {
        observer.error(error);
    }
});

myObservable.subscribe(result => {

    // Xử lý success tại đây
}, error => {

    // Xử lý lỗi tại đây
});

Ví dụ:

HTML

<!-- app.component.html -->
<div> 
	<p>{{ data }}</p> 
</div>

JavaScript

// app.component.ts 

import { Component, OnInit } 
	from '@angular/core'; 
import { Observable } from 'rxjs'; 

@Component({ 
	selector: 'app-root', 
	templateUrl: './app.component.html', 
	styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
	data: string = "data before observable response"; 

	ngOnInit() { 
	
		// Mô phỏng hoạt động không đồng bộ
		//bằng một Observable 
		this.fetchDataWithObservable().subscribe( 
			data => { 
				this.data = data; 
			}, 
			error => { 
				console.error(error); 
			} 
		); 
	} 

	fetchDataWithObservable(): Observable<string> { 
		return new Observable(observer => { 
			setTimeout(() => { 
			
				// Truy xuất dữ liệu sau một số trì hoãn
				const success = true; 
				
				// Bạn có thể thay đổi điều này sang false 
				// để mô phỏng một lỗi
				if (success) { 
					observer.next("Data fetched with an Observable"
								" and displayed after 5 sec"); 
					observer.complete(); 
				} else { 
					observer.error("Error occurred while fetching data"); 
				} 
			}, 5000); 
		}); 
	} 
}

Kết quả:

Nhược điểm của Observable:

• Khó học hơn promise vì nó đến từ RxJS.
• Gỡ lỗi là cách tốt hơn khi dùng Observable.
• Ít sử dụng những gì mà observable cung cấp.

Sự khác biệt giữa Promise và Observable

Trên đây là những điều bạn cần biết về sự khác biệt giữa Promise và Observable. Hi vọng bài viết hữu ích với các bạn.