在Observable执行中获取另一个Observable元数据的问题排查

需要为歌曲信息添加元数据，希望通过一次Observable执行完成合并，但无法在最终map操作符中获取到元数据，两次尝试均未成功：

首次尝试代码 #

songsViewData = combineLatest([
    this.songs,
    this.genre,
]).pipe(
    map(([songs, genre]) => { 
        let query = {
            filename: songs[genre],
            song_id_range: 50,
            filenames_included: true
        }

        // 这里返回的不是处理后的对象，而是一个Observable的订阅对象
        return this.getSongData(query).subscribe((metaData) => {
            return (songs[genre]).map((song) => {
                return {
                    id: song,
                    songTitle: metaData[song].songTitle,
                    artistName: metaData[song].artistName
                }
            })
        })
    })
)

错误分析 #

在map操作符内部直接调用subscribe是错误的：

• subscribe返回的是Subscription对象，而非处理后的歌曲数据，导致songsViewData最终类型错误
• Observable管道中禁止嵌套订阅，这会破坏数据流的链式结构，还可能引发内存泄漏

第二次尝试代码 #

songsViewData = combineLatest([
    this.songs,
    this.genre,
]).pipe(
    switchMap(([songs, genre]) => {
        let query = {
            filename: songs[genre],
            song_id_range: 50,
            filenames_included: true
        }
        return this.getSongData(query) // 这里拿到了元数据
    }),
    map(([songs, genre, metaData]) => { // 希望在这里访问元数据，但无法获取songs和genre

        return (songs[genre]).map((song) => {
            return {
                id: song,
                songTitle: metaData[song].songTitle,
                artistName: metaData[song].artistName
             }
        })
    })
)

错误分析 #

switchMap中只返回了getSongData(query)的结果，导致原有的songs和genre上下文丢失：

• 后续map操作符只能接收到metaData，解构[songs, genre, metaData]自然拿不到前两个变量

正确解决方案 #

在switchMap内部，将原有的songs、genre与获取到的metaData打包后传递到下一个操作符，确保所有需要的变量都能被访问：

songsViewData = combineLatest([this.songs, this.genre]).pipe(
  switchMap(([songs, genre]) => {
    const query = {
      filename: songs[genre],
      song_id_range: 50,
      filenames_included: true
    };
    // 用内部map将songs、genre和metaData打包传递
    return this.getSongData(query).pipe(
      map(metaData => ({ songs, genre, metaData }))
    );
  }),
  map(({ songs, genre, metaData }) => {
    // 此时可以正常访问所有变量，完成数据合并
    return songs[genre].map(song => ({
      id: song,
      songTitle: metaData[song].songTitle,
      artistName: metaData[song].artistName
    }));
  })
);

原理说明 #

• switchMap负责切换到获取元数据的Observable，同时保留原有的songs和genre变量
• 内部的map将三个变量打包成一个对象，确保数据流中包含所有后续处理需要的信息
• 最后的map可以解构出所有变量，顺利完成歌曲数据与元数据的合并

内容的提问来源于stack exchange，提问作者Jerome