解决 Angular 5 中的 observable 没有结果答案

【问题标题】：Resolve observable in Angular 5 with no results解决 Angular 5 中的 observable 没有结果
【发布时间】：2018-01-26 01:50:14
【问题描述】：

我通过返回 Observable 的服务使用 Box API 获取图像。当没有找到图像时，Observable 永远不会解析。在调用 API 时，我正在显示一个加载微调器。即使没有结果，我也希望 Observable 能够解析，这样我就可以关闭加载微调器。

我不想设置超时。

盒子服务：

getProjectImages(projectId: string, featured?: boolean, thumbnail?: boolean) {
    const featuredFlag = (featured !== undefined ? (featured ? flag.YES : flag.NO) : undefined);
    const thumbnailFlag = (thumbnail !== undefined ? (thumbnail ? flag.YES : flag.NO) : undefined);
    return this.search(projectId, featuredFlag, thumbnailFlag)
            .map(files => Observable.of<FileInfo>(...files)) // for each box file create an observable
            .concatAll() // flatten Observable<Observable<FileInfo>> to Observable<FileInfo>
            .map(f => this.getRepresentations(f.id)) // For each FileInfo get it's Representation
            .concatAll(); // flatten Observable<Observable<FileRepresentation>>
}

组件：

this.boxService.getProjectImages(String(project.projectId), true, false)
    .catch(err => observer.error(err))
    .subscribe((image: FileRepresentation) => {

        // hide loading spinner
        // If images are found, display images.
        // Currently, this is only reached if images are found.

    });

【问题讨论】：

标签： angular observable angular2-observables

【解决方案1】：

订阅是异步的，因此只有在找到数据/没有错误时才会到达；

如果您正在调用 api/service 来获取图像，http 响应将很快到达，并带有错误、空数据或实际图像。如果数据或图像为空，您订阅下面的文本肯定会被调用。如果这不是空图像的情况，那么它是因为 http 响应返回您没有捕获的错误，或者您对返回数据的操作不正确。

示例：

getImages():Observable<Images[]>{
     return this._http.get(this.getImagesURL)
     .catch( this.handleError );
 }

private handleError( error: any ) {
    if ( error instanceof Response ) {//Backend Error
        //.json() parsing failed from server
        console.log( "Error:"+error.text() );
        return Observable.throw( error.text() );
    }
    //otherwise the server returned error code status
    return Observable.throw( error );
}

  this.dataService.getImages().subscribe(data=>{
      console.log("Response has arrived it may be empty");
  }),
  error=>{
      console.log( "ERROR:" + error );
  }

【讨论】：

【解决方案2】：

您必须确保您的 observable 完成，以便调用 finally 运算符。您使用finally 运算符在流完成后执行回调。

this.boxService.getProjectImages(String(project.projectId), true, false)
.catch(err => observer.error(err))
.finally(()=> { /** turn off loading indicator **/ })
.subscribe((image: FileRepresentation) => {
});

我不清楚你是如何创建 observable 的。你调用 this.search() 方法返回一个 observable，但这是一个无限的观察者吗？

如果从未调用过complete() 方法，或者您没有合适的运算符来完成流。只要有订阅者，它就会无限期地保持开放。

您可以使用take(#) 或first() 等运算符在某些项目发出后自动完成可观察对象。

我需要看看this.search() 如何提供更好的答案，但首先尝试使用finally() 看看是否可以解决问题。也许 observable 正在正确完成。

【讨论】：