Angular 2系列获取请求答案

【问题标题】：Angular 2 get request in seriesAngular 2系列获取请求
【发布时间】：2017-05-01 01:00:13
【问题描述】：

我有一个配置服务，用于从 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());
    });
  }

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

在我的组件中：

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

事实是我在订阅时遇到错误“在类型 void 上不存在”。我在这里做错了什么，以及连续发出获取请求的正确方法是什么。

【问题讨论】：

您收到“void”错误的原因是您的 getJoueurs() 函数没有返回任何内容。它运行getConfiguration() yes，但它不输出任何可以订阅的内容。朱莉娅在下面的回答将帮助您解决剩下的问题，但她暂时也错过了回报..
我不太明白，方法“getjoueurs”正在返回可观察对象 return this.http.get(url + 'joueur').map(res => res = res.json( ));这条线应该返回我的可观察对象。你能帮我弄清楚丹尼斯吗？实际上，在 julia 的回答中，getJoueurs 方法中没有返回任何内容。

标签： json angular http callback angular2-services

【解决方案1】：

需要使用switchMap/mergeMap/concatMap操作符：

这里是我最常用的 switchMap：

将每个源值投影到一个 Observable 中，该 Observable 合并到输出 Observable 中，仅从最近投影的 Observable 中发出值。 http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html

如果你有 AngularJS 的经验并想开始使用 Observales，你可以看看我的帖子： $Q 映射到 RxJS https://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));
}

【讨论】：

别忘了返回结果，你的代码现在只执行，getJoueurs() 不返回任何东西..这就是 void 的原因..
原来的结果是 .subscribe((joueurs) => console.log(joueurs));.
感谢 Julia 的回答，但在这种情况下使用 switchMap 没有得到任何结果。

【解决方案2】：

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

我的猜测是您的线路：this.requestService.getJoueurs().subscribe((joueurs) => console.log(joueurs)); 是您实际用例的替代品，因此我将针对 Julia 在函数本身中注销的方法来解决它。（完全有效）

您可以使用打字稿查看订阅内容并键入内容。您没有在 getJoueurs() 函数中返回任何内容。

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!

您的函数需要返回一个值

如果我们对你的函数中的 typescript 更严格，你可以将这些示例写成：

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 效果很好，只要确保在函数中返回一个值即可。subscribe "does not exist on type void" 错误是因为您在需要返回 @987654330 时返回 null @

希望有帮助！

【讨论】：