使用 Observables 进行同步 http 请求答案

【问题标题】：Make synchronus http requests with Observables使用 Observables 进行同步 http 请求
【发布时间】：2017-04-18 21:34:39
【问题描述】：

我正在从事 Angular 2 项目。我必须使n 成为http Requests 的数量。但我需要等待从上一个请求中获取数据才能发出下一个请求。

如何使用Observables 实现这一目标。

我在做：

_.forEach(data, (path) => {
        this.userService.getTreeNodes(path.id)
          .subscribe(
            data => {
              //do something
            }
          );
      });

所以现在，三个同时请求正在执行。

【问题讨论】：

你尝试过承诺吗？？ Refer
我试图弄清楚如何使用 observables 和 rxjs 操作符来做到这一点。
您能发布您的代码吗？到目前为止您尝试过什么？
@Manish 代码添加

标签： javascript angular rxjs rxjs5

【解决方案1】：

flatMap - 运算符是关键字，可以帮助您解决问题。

flatMap 是我们处理可观察对象之间依赖关系的方式。我的样本是人为设计的，但我从第一个 observable 返回一个值，第二个 observable 需要该值来计算总和。

就像我说的那样，这个例子是人为的，但是如果我们将它与 Promise 进行比较，flatMap 就是我们创建相当于 Promise 链的方式。代码如下。

let first = Observable.of(10);
first.flatMap((operand1) => {
  return Observable.of(operand1 + 10);
})
.subscribe(res => this.flatMappedStreams = {msg: '10 + 10 = ' + res});

来源http://www.syntaxsuccess.com/viewarticle/combining-multiple-rxjs-streams-in-angular-2.0

【讨论】：

如果他需要等待上一个httprequest完成concatMap可能更合适

【解决方案2】：

这是一个登录函数的示例，它首先从 facebook 获取 accessToken，然后将该令牌发送到第二个服务以获取用户配置文件。

login(): Observable<any> {

let fas: FacebookAuthResponse = {
  accessToken: null,
  expiresIn: null,
  signedRequest: null,
  userID: null,
};

let fbResponse: Subject<any> = new Subject();
let userProfile: Subject<any> = new Subject();

this.fb.login().then((response: FacebookLoginResponse) => {
    fbResponse.next(response.authResponse);
  }), (error: any) => {
  console.error(error);
};

fbResponse
  .map((far: FacebookAuthResponse) => far.accessToken)
  .mergeMap(accessToken => this.processLogin(accessToken))
  .subscribe(res => userProfile.next(res));

return userProfile

}

进程登录（令牌）{

let headers = new Headers({ 'Authorization': 'Bearer facebook ' + token });
let options = new RequestOptions({ headers: headers });

return this.http.get('http://localhost:8000/user-profile/', options)

}

这里我使用 rxjs Observable 和 rxjs Subject。我会推荐阅读这篇文章：http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/

fbResponse.next(response.authResponse);

当 this.fb.login 被解析后，在 fbResponse Subject 上调用 next 以进一步处理 fb.login 响应。

.map((far: FacebookAuthResponse) => far.accessToken)

这里的map用于从fbLogin响应中获取accessToken。

接下来发生的事情不是您的问题的一部分，但可能会很有趣。

.mergeMap(accessToken => this.processLogin(accessToken))
.subscribe(res => userProfile.next(res));

mergeMap 让我们订阅请求链中的最后一个调用，并返回该值。

所以当我们订阅这个登录请求时，当所有请求同步完成时，会返回上次调用的用户配置文件。

【讨论】：