Javascript RxJS 管道中的链接映射不起作用

发布于09月10日

我正在try 使用以下函数转换来自YouTube搜索API的GET请求.

第一个映射应该为我获取响应对象中的项. 使用第二个映射，我希望将这些项映射到我的Custom Class SearchResult. 但由于某些原因，第二个映射中总是有完整的项目列表，而不是迭代单个元素.因此，管道不会返回带有SearchResult元素数组的可观测对象.

13号角 RxJS 7.5

  search(query: string) : Observable<SearchResult[]>{
    const params: string = [
      `q=${query}`,
      `key=${this.apiKey}`,
      `part=snippet`,
      `type=video`,
      `maxResults=10`
    ].join('&');
    const queryUrl = `${this.apiUrl}?${params}`;
    return this.http.get(queryUrl).pipe(
      map((response : any) => response.items),
      map(item => {
        return new SearchResult({
          id: item.id.videoId,
          title: item.snippet.title,
          description: item.snippet.description,
          thumbnailUrl: item.snippet.thumbnails.high.url
        });
      }),
    )}
  }

推荐答案

第一个map从响应返回items数组，第二个map应该使用Array.map()函数将数组项映射到所需的模型.

RxJS的map操作符并不遍历数组项，而是将流中发出的每个值映射到其他值.

您可以按如下方式进行处理:

search(query: string): Observable<SearchResult[]> {
  const params: string = [
    `q=${query}`,
    `key=${this.apiKey}`,
    `part=snippet`,
    `type=video`,
    `maxResults=10`,
  ].join('&');
  const queryUrl = `${this.apiUrl}?${params}`;
  return this.http.get(queryUrl).pipe(
    map((response: any) => response.items),
    map((items) =>
      items.map(
        (item) =>
          new SearchResult({
            id: item.id.videoId,
            title: item.snippet.title,
            description: item.snippet.description,
            thumbnailUrl: item.snippet.thumbnails.high.url,
          })
      )
    )
  );
}

你可以在这里阅读更多信息:https://rxjs.dev/api/operators/map