了解如何处理来自 http 调用的可观察 returns

Question

我刚开始使用 Angular 2 应用程序进行一些 http 调用，这让我了解了 Observables。我仍然很难学习如何处理它们，对于初学者来说文档有点缺乏。我将举一个简短的例子来说明我遇到的困难：

getValue() {        
        let headers = new Headers({ 'Content-Type': 'text/plain' });
        let options = new RequestOptions({ headers: headers });
        return this.http.get('http://url/boolean.json', options)
}

这是一个 return 布尔值的 get 调用。现在，如果我想在一个函数中使用这个值，我本能地希望我可以像这样分配一个变量：

let varName = this.getValue()

显然这是不可能的，我读到要从可观察对象中获取输出，您需要订阅它。有没有可能让我的函数 getValue() return 成为布尔值而不是可观察值？然而在这种情况下，因为我只需要有布尔值，我不确定异步编程是否有意义？好像这需要很长时间。 Angular 2 中是否还有一种方法可以摆脱这种异步行为（对于像这样的简单函数？）？

Answer 1

您可以 "simulate" 使用 Angular2 的 async 管道的伪同步模式：

<div>{{value | async}}</div>

在这种情况下 value 是可观察的，而不是 HTTP 响应的内容。

这样 Angular2 会在后台为您订阅并管理相应的订阅。收到数据后，模板会相应更新。

您实际上无法绕过异步模式，因为它是底层 API (XMLHttpRequest) 执行 HTTP 请求的方式（通常 JavaScript）。

你可以注意到 Rx / Observables 对链式处理真的很强大。例如，您可以利用像 flatMap 这样的运算符，并且您只能在链的末端进行订阅。这是一个示例：

this.getValue().flatMap((data) => {
  // return another observable
  return this.getAnotherRequest();
}).subscribe((data) => {
  // data is the result of the second request
});

本 Rx 教程可以帮助您：

https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

编辑

以下是利用运算符的方法：

this.getCurrentUser().flatMap((user) => {
  // return another observable
  return this.getData(user);
}).subscribe((data) => {
  // data is the result of the second request
}, (err) => {
  // no current user, ...
});

了解如何处理来自 http 调用的可观察 returns

Understanding how to deal with observable returns from http calls

rxjs

angular2-http

angular