在Angular中Promise和Observable之间有什么区别?

每一个例子都有助于理解这两种情况。在什么情况下,我们可以使用每种情况?


当前回答

承诺

定义:帮助您异步运行函数,并使用它们的返回值(或异常),但仅在执行时使用一次。不懒惰不可取消(有Promise库支持取消,但ES6 Promise目前还没有)。两个可能的决定是拒绝决定无法重试(promise应该可以访问返回promise的原始函数,该函数具有重试功能,这是一种错误的做法)

可观察到的

定义:帮助您异步运行函数,并在执行时以连续顺序(多次)使用它们的返回值。默认情况下,它是懒惰的,因为随着时间的推移,它会发出值。有很多运算符,简化了编码工作。一个运算符重试可以用于在需要时重试,如果我们需要根据某些条件重试可观察值,也可以使用retryWhen。

注:**RxMarbles.com上提供了操作员列表及其交互式图表**

其他回答

许诺

Promise在异步操作完成或失败时处理单个事件。

注意:有Promise库支持取消,但ES6 Promise目前还没有。

可观察的

Observable就像一个流(在许多语言中),允许传递零个或多个事件,并为每个事件调用回调。

与Promise相比,Observable通常更受欢迎,因为它提供了Promise等特性。使用Observable,无论您想处理0、1或多个事件。您可以在每种情况下使用相同的API。

Observable也比Promise具有可取消的优势。如果不再需要对服务器的HTTP请求或其他昂贵的异步操作的结果,则Observable的Subscription允许取消订阅,而Promise最终将调用成功或失败回调,即使您不再需要通知或它提供的结果。

当Promise立即启动时,Observable只有在您订阅它时才会启动。这就是为什么Observable被称为lazy。

Observable提供了map、forEach、reduce等运算符。。。类似于阵列

还有一些强大的运算符,如retry()或replay()。。。这通常很方便。rxjs附带的操作员列表

惰性执行允许在通过订阅执行可观察到的操作之前建立一个运算符链,以进行更具声明性的编程。

Promise:是一个ES6特性,它处理在创建时立即执行的异步代码,该代码当时只能发出一个值,并且不可取消。随着现代应用程序和功能需求的复杂性,如果我们要同时执行多个承诺,或者在执行之前进行过滤或进行一些转换,那么就必须实现复杂的代码:

myPromise.then((resolvedValue) => {
    console.log(resolvedValue);
}, (error) => {
    console.log(error);
});

Observable:是Rxjs库提供的一个Object,它帮助我们处理JavaScript应用程序中的反应式编程,它提供链接和订阅来处理复杂的应用程序,具有可取消的优点,同时提供许多值。此外,我们还可以从应用其他运算符(如retry()、map()、filter()、switchMap()等)的链接中获益,这有助于处理复杂的用例和繁重的用户界面。

即时搜索示例:

search(terms: Observable<string>) {
    return terms.pipe(
      debounceTime(400),
      distinctUntilChanged(),
      switchMap((term) => this.searchEntries(term))
    );
  }

并行的许多APIS调用示例:

let character = this.http.get('https://jsonplaceholder.typicode.com/todos');
    let characterHomeworld = this.http.get(
      'https://jsonplaceholder.typicode.com/posts'
    );

    forkJoin([character, characterHomeworld]).subscribe((results) => {
      console.log('result °', results[0]);
      console.log('result 1', results[1]);
    });

还有一个区别:全球与进口

Promise是一个标准的内置对象,您可以直接使用它。在此处检查浏览器支持。

const myPromise=新Promise((解析,拒绝)=>{setTimeout(()=>{解决(“无需安装即可”);}, 300);});我的承诺.then(值=>{console.log(值)}).catch(错误=>{console.log(错误)});

JavaScript的可观察、反应式扩展需要RxJS安装和导入才能使用

import { Observable } from 'rxjs';

关于这个话题已经有很多答案了,所以我不会再赘述。

但是对于刚开始学习Observable/Aangular并想知道与Promise相比使用哪一个的人来说,我建议您将所有内容都保持Observable,并将项目中所有现有的Promise转换为Observable。

因为Angular框架本身及其社区都在使用Observable。因此,当您集成框架服务或第三方模块并将所有内容链接在一起时,这将是有益的。


当然,没有任何意见在所有情况下都是100%正确的,但至少我认为98%的时间是在Angular框架中实现的常规商业项目,Observable是正确的选择。

即使你在开始你的简单爱好项目时不喜欢它,你很快就会意识到你在Angular中与之交互的几乎所有组件,而且大多数Angular友好的第三方框架都使用Observables,然后你会不断地将Promise转换为Observable,以便与它们进行通信。

这些组件包括但不限于:HttpClient、表单生成器、Angular材质模块/对话框、Ngrx存储/效果和ngx引导。

事实上,我在过去两年中处理的Angular生态系统中唯一的Promise是APP_INITIALIZER。

Promise和Observables都帮助我们处理异步操作。当这些异步操作完成。Angular使用RxJS中的Observables而不是承诺来处理HTTP

以下是承诺和可观察性的一些重要区别。