Angular Service响应如何保留调用时传入的初始参数

你可以通过RxJS的map操作符将调用时的platform参数和接口返回值绑定为一个新对象返回，就能在subscribe回调中稳定获取对应的平台标识，有两种常用实现方案：

方案1：仅在组件调用侧改造（无需修改Service代码） #

在组件调用Service的位置新增map管道，把平台参数和返回数据组合后再传递给回调：

for (let platform of this.platforms) {
    this.artistsService.getFollowers(uuid, platform)
    .pipe(
        map(data => ({ platform, data }))
    )
   .subscribe((res: {platform: string, data: any[]}) => { 
        console.log('当前响应对应平台：', res.platform);
        console.log('接口返回数据：', res.data); 
    })
}

方案2：改造Service返回结构（全局复用更方便） #

直接修改Service的getFollowers方法，返回时就把平台参数绑定到结果中，所有调用该方法的位置都能直接拿到对应平台：

getFollowers(uuid: string, platform: string): Observable<{platform: string, data: any[]}> {
    return this.http.get<any[]>(this.baseUrl + '/followers/' + platform + '/' + uuid + '?format=json', httpOptions)
      .pipe(
        map(data => ({ platform, data })),
        catchError(this.handleError('getFollowers', []))
      );
}

组件侧调用时直接取返回值的platform字段即可：

.subscribe((res) => { 
    console.log(res.platform, res.data); 
})

补充说明 #

如果你实际代码中循环变量使用的是var声明而非let，也会出现所有回调拿到的都是最后一次循环平台值的问题，这种情况除了上面的方案，也可以直接把循环变量声明改为let，利用块级作用域特性也能拿到正确值。不过更推荐上面的参数绑定响应方案，逻辑更清晰，不受变量声明方式影响。

内容的提问来源于stack exchange，提问作者A. Nurb