ES7 引入了一个新特性，称为 Observable。Observable 是使用 Reactive Programming （响应式编程）的基础，使得开发者能够有选择地利用观察模式来处理异步事件。
什么是 Observable？
Observable 是一种用于处理异步数据流的 API，它提供了一种简单且灵活的方法来订阅和响应多个事件。 Observable 和 Promise 类似，它们都是一种支持异步操作的对象，不过 Observable 支持多次产生值，而 Promise 则只能产生一个值。
Observable 可以看做一个被观察者（Subject），它可以通过订阅（subscribe）来获取相对应的事件。当事件产生时，可以将事件传递给所有订阅者，让它们进行处理。
Observable 的核心 API
在 ES7 的 Observable 中，最主要的 API 包括：
Observable.create()—— 创建 Observable 对象Observable.subscribe(observer)—— 订阅事件observer.next(value)—— 发布下一个事件observer.error(error)—— 发布错误事件observer.complete()—— 发布完成事件
-- -------------------- ---- ------- ----- ---------- - --- --------------------- -- - ----------------- ----------------- ----------------- -------------------- --- ---------------------- ----- ------- -- ------------------- ------ ----- -- ------------------- --------- -- -- ----------------------- ------------ --- -- ------- -- -- -- ---------- ---------
以上代码创建了一个 observable 对象，它有三个数据事件（1，2，3）和一个完成事件。使用订阅进行处理时，每个事件都会输出到控制台，完成事件也将被触发。
与 Promise 的区别
Observable 和 Promise 都可以用于异步编程，但它们还是存在一些差异：
- Promise 是单次对象，只能产生一次结果，而 Observable 可以产生多次值。
- Promise 虽然支持
then()，但没有catch()方法支持。但是 Observable 支持许多针对错误处理的操作符。 - Promise 更适合执行协调任务，而 Observable 则用于处理实时数据流。
基于这些不同之处，我们可以选择使用 Promise 或者 Observable 来实现异步操作。
Observable 的使用场景
Observable 在实际应用中有几种常见场景：
处理网络请求
Observable 可以用于处理 Web 应用中的异步数据请求。通过 Observable 订阅相应的服务器响应，我们可以优雅地处理数据流，从而获得更好的用户体验。
const request$ = ajax('/url');
request$.subscribe({
next: (data) => console.log(data),
error: (err) => console.error(err),
complete: () => console.log('Request completed'),
});上述示例中，ajax('/url') 返回的是一个 Observable 对象，在订阅后，我们可以处理数据内容，错误信息或请求完成事件。
处理用户交互
Observable 也可以用于响应式编程。通过订阅用户行为事件流，我们可以很容易地构建出更加优秀的 Overlay、Modal 或 Popover 组件。
const clickSource$ = fromEvent(document, 'click'); clickSource$.subscribe((event) => console.log(event.target));
上面示例中，fromEvent(document, 'click') 返回一个 Observable 对象，每次点击事件都将被触发并输出到控制台。
结论
Observable 是 ES7 引入的一项非常实用的异步 API。它允许开发者在处理异步数据时使用响应式编程方式极大地简化代码，提高性能和用户体验，对 JavaScript 开发具有深远的指导
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6729c6322e7021665e2599d0