随着前端应用的复杂度不断增加，异步编程成为了一个必不可少的技能。Promise 和 Observable 都是两种流行的异步编程解决方案，但它们在很多方面有着不同。本文将比较 Promise 和 Observable 的差异以及它们的使用场景。
Promise 和 Observable 的差异
执行方式
Promise 是一个最常见的异步编程模型，它处理一次异步操作，并在操作完成时返回一个结果。Promise 有三种状态：pending（等待）、fulfilled（成功）、rejected（失败）、一旦状态发生改变，就会一直保持这个状态，直到操作返回结果。
Observable 是一种异步编程技术，它以可观察序列的形式表示数据流。Observable 可以处理多个异步操作并在每个操作完成时返回一个新值。Observable 还可以在数据流中添加一个错误处理器，以便在发生异常时处理它们。
多个值
Promise 只能返回一次值，一旦返回了一个值，这个 Promise 对象就不能接收任何其他值。如果异步操作返回多个值，则必须通过多个 Promise 对象来处理它们。
Observable 是可以处理多个值的，它可以从数据流中返回任意数量的值。Observable 还可以在整个过程中将新值添加到数据流中，因此只需要在需要时订阅 Observable 并处理流。
取消异步操作
Promise 不支持直接取消已经开始的异步操作。一旦启动异步操作，它会一直运行直到完成或发生错误。
Observable 支持取消异步操作。这是因为 Observable 是基于被观察者和观察者之间的订阅关系构建的。只需取消观察者对 Observable 数据流的订阅，就可以取消当前异步操作。
Promise 和 Observable 的使用场景
Promise
Promise 可以用于以下场景：
1、单个异步操作的情况下，Promise 不仅使用起来简单，而且还能有效地处理异步代码，从而实现更优质的代码质量。
-- -------------------- ---- -------
-------- ----------- -
------ --- ---------------- --------- ------- -
-- ----
----- --- - --- -----------------
--------------- -------------------------------
---------- - -------- -- -
-- ----------- --- ---- -
-------------------------- -- ------- -------
- ---- -
----------------- -- ------ -------
-
--
----------- - -------- -- -
----------------- -- ------ -------
--
-----------
---
-2、串行请求。Promise 组合可以有效地处理多个要执行的操作。
-- -------------------- ---- ------- ------------------------- ---------- - ----- ---- - --------------------- ------ ----------------------- -- ----- ------- ---------------- ---------- - ----- ----- - --------------------- ------------------- -- ------- ----------------- ------- - ------------------- -- --------------- -- ------ ---
Observable
Observable 可以用于以下场景：
1、处理数据流。WebSocket 连接、用户输入流等场景需要处理可观察事件流。Observable 可以有效地处理这些场景。
-- -------------------- ---- -------
----- ---------- - --- ------------------- ---------- -
-----------------
-----------------
-----------------
------------------- -- -
-----------------
--------------------
-- ------
---
----------------------
----- -------- ------ -
------------------ -- ------
--
------ -------- ------- -
--------------------------- -- ------
--
--------- -------- -- -
-------------------- ----
-
---2、处理高级异步操作，如异步操作的取消或者中断。Observable 提供了一些非常方便的方法，如 takeUntil()，以便在某些条件达成时取消订阅。
-- -------------------- ---- -------
----- ---------- - --- ------------------- ---------- -
----- ------- - -------------------- -- -
-----------------
-- ------
------ -------- -- -
-----------------------
--
---
----- ---------------- - --- ----------
--------------------------------------------------------
-- -- ---------- ----
----- -------- ------ -
------------------
--
-- -- ---------- ---
------ -------- ------- -
---------------------
--
-- -- ---------- --
--------- -------- -- -
------------------
-
---
-- - ------
------------------- -- -
------------------------
----------------------------
-- ------总结
在使用 Promise 和 Observable 时，需要根据不同的场景选择合适的解决方案。如果只处理一个异步操作，Promise 是一个更好的选择。但是，如果处理多个值的数据流，Observable 更合适。
最后，需要注意的是，基于 Promise 和 Observable 的异步编程技术是非常重要的技术，我们需要深入了解它们并在实际项目中熟练运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648279d048841e98941dfc98