使用 observables 进行 Http 服务轮询答案

【问题标题】：Http Service polling with observables使用 observables 进行 Http 服务轮询
【发布时间】：2017-05-18 01:22:33
【问题描述】：

我正在尝试使用 Observables 在 Angular 2 中进行轮询。我知道还有很多其他答案，但是我无法让它们为我工作。

我知道这是一个纯粹的理解问题，所以对答案的解释（它在做什么以及为什么）而不是纯粹的代码将不胜感激。

test.service.ts

@Injectable()
export class EtlService {

constructor(private http: Http) { }

//Get ETL by status
get(): Observable<EtlByStatus> {
    var url = 'someURL';

    return this.http
        .get(url)

        .map(response => {
            return {
                headers: response.json().data.headers,
                dataSet: response.json().data.data
            }
        });
}

通过简单的订阅调用此服务即可按预期工作：

this._service
            .get()
            .subscribe(
                res=> {
                    this.headers= res.headers;
                    this.data = res.dataSet;
});

但是，我的问题是轮询。据我所知，轮询应该在 Component 内完成，以使服务更可重用 - HTTP 请求很简单，并且可以通过多种方式进行处理。

test.component.ts

pollGet(timer: number = 30000): Observable<GetInterface> {
        return Observable.interval(timer)
            .switchMap((res) => {
                this._service.get();
            })
            .map(res => res)
            .subscribe(res => {
                console.log('testing');
            })
    }

以上返回res => void is not assignable 和type void is not assignable to type ObservableInput。我尝试将中间的 get 行转换为返回，这会产生更多错误并返回 subscribe 是一个函数的消息。

因此，您如何使用Observables 进行轮询？我确信这是我对map、switchMap 和subscribe 的理解，以及它们作为observable 的一部分如何发挥作用，但我无法弄清楚。

【问题讨论】：

Observable polling?的可能重复
类似，但最佳答案不使用间隔。第二个答案确实如此，但没有解释代码在做什么或为什么。

标签： angular observable rxjs5

【解决方案1】：

您的函数pollGet 正在处理返回Observable<GetInterface>，基于可重用原则，因此finally subscribe 不适合这里，因为它会将返回类型转换为subscription。

关于switchMap：

switchMap 用于组合 observable 链，switchMap 中的 Observable 是基于原始 Observable 的结果。所以在这里你应该在switchMap中返回类型Observable。

根据您的代码，switchMap 中的 observable 与任何原始 observable 结果无关，所以这里您可以简单地使用map。

所以最终的工作代码块如下：

pollGet(timer: number = 30000): Observable<any> {
    return Observable
               .interval(timer)
               .map(() => {
                   //return this.http.get('111');
                   // make sure your r_service.get return an Observable as the example above: http.get
                   return this._service.get();
               })
               .map(res => res);
}

【讨论】：

你能解释一下为什么你使用map 两次吗？我正在努力获得正确的上下文，但是这是我所要求的民意调查。谢谢
@Doug 第一个地图将创建一个新的_service.get 流，第二个map 基于您想要从_service.get 返回的内容。所以你可以在第二张地图中返回response它自己或response.data或response.data.xxx。

【解决方案2】：

您的地图需要在 switchMap 中。我相信 switchMap 在这里是正确的使用，因为你想返回一个新的 observable，而不是间隔发出的整数。您需要做的是附上您的地图以处理 http/service 响应。

pollGet(timer: number = 30000): Observable<GetInterface> {
  return Observable.interval(timer)
    .switchMap((intervalCounter) => {
      return this._service.get() // note that you need a return here, or inline return
        .map(res => res);
    })
    .subscribe(res => {
      console.log('testing');
    })
}

【讨论】：