Angular 2个get请求串联

Question

我有一个配置服务，用于从 json 文件中检索特定信息。

 getConfiguration(key) {
    return this.http.get('./app/config/development.json').map(res => {
      this.result = res.json();
      return this.result[key];
    });
  }

我正在尝试获取 api 的基础 url（在 development.json 中），并使用此 url 提出请求。

getJoueurs() {
    this.conf.getConfiguration('apiBaseUrl').subscribe((url: any) => {
      return this.http.get(url + 'joueur').map(res => res = res.json());
    });
  }

因此，我订阅以取回我的配置，然后尝试 return 一个可观察对象，以在我的组件中捕获它。

在我的组件中：

this.requestService.getJoueurs().subscribe((joueurs) => console.log(joueurs));

事实是我在订阅时遇到错误 "does not exist on type void"。我在这里做错了什么，串行获取请求的正确方法是什么。

Answer 1

您需要使用 switchMap/mergeMap/concatMap 运算符：

这是我最常使用的 switchMap：

Projects each source value to an Observable which is merged in the output Observable, emitting values only from the most recently projected Observable. http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html

如果你的 AngularJS 已经过期并且想开始使用 Observales，你可以看看我的 post： $Q 映射到 RxJShttps://medium.com/@juliapassynkova/q-map-to-rxjs-981936a2b22d

getJoueurs() {
   this.conf.getConfiguration('apiBaseUrl')
     .switchMap((url: any) => this.http.get(url + 'joueur'))
                                .map(res => res = res.json()
     )
     .subscribe(joueurs => console.log(joueurs));
}

Answer 2

好的，我要回答一下，以便能够解释一下。 @julia 的答案大部分都在那里，但它仍然不适用于您的功能。

我的猜测是你的台词：this.requestService.getJoueurs().subscribe((joueurs) => console.log(joueurs)); 是你实际用例的替代品，所以我将解决它与 Julia 在函数本身中注销的方法的对比。（完全有效）

您可以使用 typescript 和 types 查看您的订阅发生了什么。您没有在 getJoueurs() 函数中 returning 任何东西。

var myPhrase = "Do I show up?";

console.log(myPhrase);
console.log('no:', noIDont());
console.log('yes:', yesIDo());

function noIDont() {
    myPhrase = 'oh no';
}

function yesIDo() {
    myPhrase = 'Yay!';
    return myPhrase;
}

// You will see:
// Do I show up?
// No:
// Yes: Yay!

你的函数需要return一个值

如果我们对您的函数的打字稿更严格，您可以将这些示例编写为：

function noIDont(): void {
        myPhrase = 'oh no';
    }

    function yesIDo(): string {
        myPhrase = 'Yay!';
        return myPhrase;
    }

因此要修改整个块以包含 Julia 的示例：

      // Get Config
getConfiguration(key): Observable<any>{
    return this.http.get('./app/config/development.json').map(res => {
      this.result = res.json();
      return this.result[key];
    });
  }

// Get Joueurs, notice the type for the return
getJoueurs(): Observable<any> {
//▼▼▼▼▼▼ MUST HAVE   
  return this.conf.getConfiguration('apiBaseUrl')
     .switchMap((url: any) => this.http.get(url + 'joueur'))
                                .map(res => res = res.json()
     );
}



// calling script in the component:
this.requestService.getJoueurs().subscribe((joueurs) => console.log(joueurs));

所以，是的，Julia 的 switchMap 或 flatMap 效果很好，请务必 return 一个值 functions.the subscribe "does not exist on type void" 错误是因为当您需要 return Observable<T>

时，您正在 returning null

希望对您有所帮助！

Angular 2个get请求串联

Angular 2 get request in series

json

http

callback

angular2-services

angular