JavaScript内核与高级编程之：`JavaScript`的`Observable`：其在响应式编程中的推模式与 `Promise` 的拉模式对比。

各位靓仔，靓女，老少爷们，大家好！我是你们的老朋友，今天咱们不聊八卦，不谈人生，就来聊聊JavaScript里两个有点意思的家伙：Observable和Promise。

别害怕，虽然名字听起来高大上，但实际上它们就像是快递小哥和外卖小哥，都是为了解决“数据异步送达”这个问题。只不过送货的方式有点不一样，一个推着送，一个等着取。

今天咱们就来扒一扒它们之间的恩怨情仇，看看谁才是异步数据流的真命天子。

一、异步数据流的那些事儿

在现代Web开发中，我们经常需要处理各种各样的异步数据。比如：

用户在搜索框里输入关键词，我们需要实时获取搜索结果。
页面上需要实时显示股票价格的变动。
聊天应用需要实时接收来自服务器的消息。

这些场景的共同特点是：数据不是一次性返回的，而是一个持续不断的数据流。如何优雅地处理这些异步数据流，就成了我们程序员需要面对的问题。

二、Promise：你是风儿我是沙，你来取我好回家（拉模式）

Promise，中文名叫“承诺”，它承诺将来会给你一个值（或者一个错误）。Promise就像一个等待被领取的外卖，你下了单，然后就等着外卖小哥送到。

特点：
- 一次性：Promise只返回一个值。
- 被动：你需要主动.then()或者await去“拉取”这个值。
- 不可取消：一旦Promise开始执行，你就无法取消它。
代码示例：

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 模拟异步请求
      const data = { name: '张三', age: 25 };
      resolve(data); // 请求成功，返回数据
      // reject(new Error('请求失败')); // 请求失败，返回错误
    }, 2000);
  });
}

fetchData()
  .then(data => {
    console.log('数据：', data); // 处理成功的数据
  })
  .catch(error => {
    console.error('错误：', error); // 处理错误
  });

console.log('继续执行其他任务...');

在这个例子中，fetchData函数返回一个Promise，它会在2秒后返回一个包含用户信息的对象。我们通过.then()方法来“拉取”这个数据，并在控制台打印出来。如果请求失败，则通过.catch()方法捕获错误。

优点：
- 处理单个异步操作非常方便。
- 代码结构清晰，易于理解。
缺点：
- 不适合处理持续的异步数据流。
- 无法取消已经开始的异步操作。
- 错误处理机制相对简单，难以处理复杂的错误场景。

三、Observable：我给你送货上门，保质保量（推模式）

Observable，中文名叫“可观察对象”，它就像一个快递小哥，会主动把数据送到你家门口。你可以订阅这个Observable，然后它会源源不断地推送数据给你。

特点：
- 持续性：Observable可以推送多个值。
- 主动：Observable会主动推送数据给订阅者。
- 可取消：你可以取消对Observable的订阅，停止接收数据。
代码示例（使用RxJS）：

首先，你需要安装RxJS库：

npm install rxjs

然后，在你的代码中引入RxJS：

import { Observable, fromEvent } from 'rxjs';
import { map, filter, debounceTime } from 'rxjs/operators';

// 创建一个 Observable，每隔1秒推送一个数字
const numberObservable = new Observable(subscriber => {
  let count = 0;
  const intervalId = setInterval(() => {
    subscriber.next(count++); // 推送数据
    if (count > 5) {
      subscriber.complete(); // 数据推送完成
      clearInterval(intervalId);
    }
  }, 1000);

  // 返回一个函数，用于取消订阅
  return () => {
    clearInterval(intervalId);
    console.log('取消订阅');
  };
});

// 订阅 Observable
const subscription = numberObservable.subscribe(
  value => {
    console.log('接收到数据：', value);
  },
  error => {
    console.error('发生错误：', error);
  },
  () => {
    console.log('数据流结束');
  }
);

// 5秒后取消订阅
setTimeout(() => {
  subscription.unsubscribe();
}, 5000);

// 使用 fromEvent 创建 Observable，监听按钮点击事件
const button = document.getElementById('myButton');
const clickObservable = fromEvent(button, 'click');

clickObservable.subscribe(() => {
  console.log('按钮被点击了！');
});

// 使用 operators 对 Observable 进行转换和过滤
const input = document.getElementById('myInput');
const inputObservable = fromEvent(input, 'input')
  .pipe(
    map((event: any) => event.target.value), // 获取输入框的值
    debounceTime(300), // 防抖，300毫秒内只触发一次
    filter(value => value.length > 2) // 过滤掉长度小于3的输入
  );

inputObservable.subscribe(value => {
  console.log('输入框的值：', value);
});

在这个例子中，我们使用RxJS库创建了一个Observable，它每隔1秒推送一个数字。我们通过.subscribe()方法来订阅这个Observable，并在控制台打印接收到的数据。5秒后，我们取消了订阅，停止接收数据。

我们还使用了fromEvent操作符从DOM事件创建了一个Observable，监听按钮的点击事件。

最后，我们使用map，debounceTime和filter操作符对输入框的input事件进行转换和过滤。

优点：
- 适合处理持续的异步数据流。
- 可以取消订阅，避免资源浪费。
- 提供了丰富的操作符，可以对数据流进行转换、过滤、组合等操作。
- 错误处理机制更加强大，可以处理复杂的错误场景。
缺点：
- 学习曲线较陡峭，需要掌握RxJS的相关概念和操作符。
- 代码相对复杂，不易于理解。

四、Promise vs Observable：一场友谊赛

为了更清楚地了解Promise和Observable的区别，我们来做一个对比：

特性	`Promise`	`Observable`
数据流	单个值	多个值
触发方式	拉模式 (主动获取)	推模式 (主动推送)
取消	不可取消	可取消
操作符	简单	丰富
适用场景	单次异步操作	持续的异步数据流，复杂的异步操作逻辑
学习曲线	简单	较陡峭
错误处理	简单 `try...catch` 或者 `.catch`	强大，可以使用 `retry`、`catchError` 等操作符

五、选择的艺术：根据场景选择合适的工具

Promise和Observable各有优缺点，我们需要根据具体的场景选择合适的工具。

如果你只需要处理单个异步操作，比如发起一个HTTP请求，那么Promise是一个不错的选择。 它的代码简单易懂，使用方便。
如果你需要处理持续的异步数据流，比如实时显示股票价格的变动，或者处理用户在搜索框里的输入，那么Observable更适合。 它可以让你更优雅地处理数据流，并提供了丰富的操作符来满足各种需求。

六、总结：掌握两把刷子，走遍天下都不怕

总的来说，Promise和Observable都是处理异步数据的利器。Promise适合处理简单的单次异步操作，而Observable更适合处理复杂的持续异步数据流。掌握这两种工具，就像掌握了两把刷子，让你在异步编程的世界里游刃有余。

记住，没有银弹，只有适合你的工具。希望今天的分享能帮助你更好地理解Promise和Observable，并在实际开发中选择合适的工具，写出更优雅、更高效的代码。

今天的讲座就到这里，谢谢大家！如果有任何问题，欢迎随时提问。希望下次有机会再和大家一起探讨更多有趣的技术话题。

发表回复 取消回复

发表回复取消回复