简体   繁体   English

Angular 2 中带有两个 http.get 调用的 Observable 类型

[英]Observable type with two http.get calls in Angular 2

In my ng2 service, i have a method that has 2 http.get calls.在我的 ng2 服务中,我有一个有 2 个 http.get 调用的方法。 The function looks something like this:该函数看起来像这样:

getInfo(userId: number): any {

    this.http
       .get(apiUrl, options)
       .map(response => response.json())
       .subscribe(example => {
           this.example.FirstName = example.FirstName;
           this.example.LastName = example.LastName;

           this.http
               .get(`/api/${userId}`)
               .map(response => response.json())
               .subscribe(example => {
                   this.example.Street = example.Street;
                   this.example.City = example.City;

                   return this.example;
               });
       });
 }

The only problem is that, in my component, i can't subscribe to this function, because it's not of type Observable<Example> .唯一的问题是,在我的组件中,我无法订阅此函数,因为它不是Observable<Example>类型。

If I replace the type any for the function with Observable<Example> I get :如果我用Observable<Example>替换函数的类型 any ,我得到:

A function whose declared type is neither 'void' nor 'any' must return a value声明类型既不是“void”也不是“any”的函数必须返回一个值

But I do return a value, after the response.但是我确实在响应之后返回了一个值。

How can I do this without having two separate functions?如果没有两个单独的功能,我怎么能做到这一点?

Yes, i did checked this answer: https://stackoverflow.com/a/36712707/3264998是的,我确实检查了这个答案: https : //stackoverflow.com/a/36712707/3264998

Try writing this as your method body, this is one way there are other ways to solve this.试着把它写成你的方法体,这是一种方法,还有其他方法可以解决这个问题。

return this.http
   .get(apiUrl, options)
   .map(response => response.json())
   .flatMap(example => {
       this.example.FirstName = example.FirstName;
       this.example.LastName = example.LastName;

       return this.http
           .get(`/api/${userId}`)
           .map(response =>  {
               let example =response.json();
               this.example.Street = example.Street;
               this.example.City = example.City;

               return this.example;
           });
   });

My solution using rxjs/Rx flatMap :我使用 rxjs/Rx flatMap 的解决方案:

import {Observable} from 'rxjs/Rx';


ngOnInit() {
  const usersId = ['USR001', 'USR003'];
  this.doRequest(usersId);
}

doRequest(queryArr, previousObservable = null) {
        if (queryArr.length) {
            const url = 'api/' + queryArr.shift();
            let observable = null;
            if (previousObservable) {
                observable = previousObservable.flatMap(() => {
                    return this.http.get(url);
                });
            } else {
                observable = this.http.get(url);
            }
            return this.doRequest(queryArr, observable);
        } else {
            return previousObservable;
        }
    }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM