为什么要使用 observables 而不是 Ajax？答案

【问题标题】：Why to use observables instead of Ajax?为什么要使用 observables 而不是 Ajax？
【发布时间】：2017-11-30 11:03:03
【问题描述】：

为什么要使用这样的 HTTP 可观察方法：

this.http.get("MyURL")
         .subscribe(
            (_url: any) => {
                //TODO My job
            },
            (error: any) => {
                //TODO My job
            },
            () => {
                //TODO My job
            });

而不是像这样使用 AJAX 方法：

$.ajax({
    url: "MyURL",
    success: function (result) {
        //TODO My job
    },
    error: function () {
        //TODO My job
    }
});

我的意思是，有什么好处和坏处？

【问题讨论】：

最明显的原因是第一个是角度指令，而后一个是基于jQuery的......最后他们都做同样的事情，所以我认为这是一个应用问题设计和偏好.. 如果你已经在使用 angular，我会尽可能地使用 angular 指令
@MKougiouris 在这种情况下 http 是提供者/服务而不是指令 :)
@MKougiouris 在这种情况下什么是 Angular 指令？抱歉 fba_pereira，您的问题中没有 Angular 指令。
“指令”是一个不恰当的词。我的意思是第一种方法是基于 angular 的 observables，就像已经属于 angular 的东西一样，而不是外部库
Why should I use HttpClient over fetch?的可能重复

标签： javascript ajax angular rxjs

【解决方案1】：

为什么要使用外部库来完成 Angular 已经具备的能力？为什么你会真正将 jQuery 与 angular 结合使用？

我认为你的问题的一个更好的标题是，为什么要使用 observables。当我开始使用 angular 时，我也有同样的问题，但是在使用 angular 一年多之后，在那段时间里我与 observables 和rxjs 进行了大量工作后，我学到了以下内容。

1- 你不能取消承诺

假设有人进入屏幕 A，然后您像这样获取一些数据。

fetch(/** some end point */)
  .then(res => res.json())
  .then(() => {
    // Handle the request here
  });

当您能够处理请求时，用户会离开屏幕 A。在大多数情况下，这没什么大不了的，但是因为您想以尽可能最好的方式做事，您最好取消对要求。使用原生承诺，这是不可能的。阅读this 文章以获得对此的详细解释

使用 observables，这变得微不足道。您可以取消订阅 observable，这将确保不会执行不必要的代码。

专业提示：在 Angular 中，您可以在组件的 ngOnDestroy 生命周期中执行此操作。

2 - 原生 Promise 有 2 个方法，rxjs 有更多。

如果您使用的是本机 Promise 实现，您唯一可以做的事情是 then 和 catch（在 Promise 实例上）。这似乎绰绰有余，但使用 rxjs 你可以做更多的事情。

示例

假设您的/article/:id 端点有时会返回空值，因为没有找到文章。在 Promise 中，您的代码将如下所示。

fetch('/article/5')
  .then( res => res.json())
  .then( res => {
    if ( res !== undefined) {
       // do something!
    }
  });

在 rxjs 中，这看起来更简洁，如果只想对数据进行处理，如果它存在的话。这似乎不是一个很大的改进，但在生产环境中，您会发现自己想做的远不止过滤未定义的值。

this.http.get("MyURL")
     // p.s this line of code might not be needed depending on ur 
     // angular version 
     .map( res => res.json()) 
     .filter( res => res !== undefined)
     .subscribe(res => {
        // Do something!
     });

我对您的建议是，无论您在做什么简单的事情，都可以使用toPromise，并在需要时逐渐使用越来越多的 rxjs 运算符。 map、filter 和 takeUntil 将是一个很好的起点。

我可以继续向你展示你可以用 rxjs 做的事情，这些事情很难用 Promise 来实现，但是那里有很多文章比我解释得更好。

TLDR

您可以编写更简洁的异步代码，用更少的代码做更多的事情。

【讨论】：

【解决方案2】：

看起来主要是因为Observables 可以定义异步行为的设置和拆卸方面。

【讨论】：

【解决方案3】：

从根本上说，它们是一回事。实际上只是实现和使用不同，所以这真的是一个偏好问题。

Observables（通常指的是“RxJS”库，尽管并非总是如此）通常有一个subscribe() 方法可以让他们监听变化，并有onNext() 的钩子（发生了一些事情），onError() （出了点问题）和onComplete()（全部完成）。

jQuery 的 AJAX 语法是一种更“经典”的回调结构，您可以在其中调用函数并直接为其提供回调。它还有另一种语法，允许您将它们添加为后续函数（.done() 等）。

不过，当专门谈论 JavaScript 时，现在我认为 Promise 语法是最流行的，因为它在 ECMAScript 6 中被标准化并且现在大多数浏览器都原生支持它。 fetch() 是使用 Promise 语法执行 AJAX 请求的本机实现。

归根结底，没有一个特别好或特别强，这真的只是归结为个人喜好和过去的经验（例如，Observables 很受有 Java 经验的开发人员欢迎, 因为Observables 在 Java 中使用频率很高）。

在这三个中，只有 Promise 有一个真正的优势，那就是它受到现代浏览器的原生支持（而其他两个需要第三方库）。但是，如果您已经将第三方库用于其他用途，那么这并不是一个巨大的好处。

【讨论】：