Promises 和 Observables 之间的区别

Promises和observables都是 JavaScript 中处理异步操作的机制，但它们在功能和行为方面有一些差异。

Promise是一个对象，表示异步操作的最终完成或失败及其结果值。它用于处理单个异步事件。创建承诺时，它处于三种状态之一：待处理、已完成或已拒绝。挂起的承诺处于初始状态，当异步操作完成时，它会转换为已完成（已解决）或已拒绝（有错误）。承诺通常与 .then() 和 .catch() 方法一起使用来处理承诺的实现或拒绝。

例子：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Operation completed successfully');
  }, 1000);
});
promise.then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Operation completed successfully');
  }, 1000);
});

promise.then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Operation completed successfully');
  }, 1000);
});

promise.then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

另一方面，Observable 是 RxJS 库中引入的一种更强大、更灵活的结构，它扩展了承诺的概念 。 Observable 表示随时间变化的值流，允许处理多个异步事件。它们可以发出零个或多个值，还可以通知错误或流的完成。Observables 与各种操作符和订阅机制一起使用来处理这些事件。

例子：

import { Observable } from 'rxjs';
const observable = new Observable((observer) => {
  setTimeout(() => {
    observer.next('First value');
  }, 1000);
  setTimeout(() => {
    observer.next('Second value');
  }, 2000);
  setTimeout(() => {
    observer.next('Third value');
    observer.complete(); // Notify completion
  }, 3000);
});
const subscription = observable.subscribe(
  (value) => console.log(value),
  (error) => console.error(error),
  () => console.log('Observable completed')
);
// Later, if necessary, you can unsubscribe
subscription.unsubscribe();
import { Observable } from 'rxjs';

const observable = new Observable((observer) => {
  setTimeout(() => {
    observer.next('First value');
  }, 1000);

  setTimeout(() => {
    observer.next('Second value');
  }, 2000);

  setTimeout(() => {
    observer.next('Third value');
    observer.complete(); // Notify completion
  }, 3000);
});

const subscription = observable.subscribe(
  (value) => console.log(value),
  (error) => console.error(error),
  () => console.log('Observable completed')
);

// Later, if necessary, you can unsubscribe
subscription.unsubscribe();
import { Observable } from 'rxjs';

const observable = new Observable((observer) => {
  setTimeout(() => {
    observer.next('First value');
  }, 1000);

  setTimeout(() => {
    observer.next('Second value');
  }, 2000);

  setTimeout(() => {
    observer.next('Third value');
    observer.complete(); // Notify completion
  }, 3000);
});

const subscription = observable.subscribe(
  (value) => console.log(value),
  (error) => console.error(error),
  () => console.log('Observable completed')
);

// Later, if necessary, you can unsubscribe
subscription.unsubscribe();

Promises

• Promises 是解决或拒绝的单一值。
• Promise 是急切的，这意味着它们在创建时立即执行。
• Promise 只能处理一个值。
• Promise 不是多播的，这意味着它们只能被订阅一次。

Observables

• Observable 是可以解析、拒绝或发出值的值流。
• Observables 是惰性的，这意味着它们在被订阅之前不会被执行。
• Observables 可以处理多个值。
• Observable 是多播的，这意味着它们可以被多次订阅。

promises和observables之间的区别：

Promises：

• 发出 API 请求
• 等待文件下载
• 打开对话框

Observables：

• 从服务器流式传输数据
• 处理用户输入事件
• 监听网络事件