如何将subscribe()内的匿名函数逻辑外包并传递参数？

以下是几种可行的实现方式：

方法一：箭头函数包裹回调（最直观） #

在subscribe中用箭头函数封装，直接将count作为参数传递给抽离的处理方法，同时保证this指向组件实例：

constructor(private _http: HttpClient) { this.fetchUsers(5); }
employees: any[] = [];

fetchUsers(count: number) {
  this._http.get(`https://jsonplaceholder.typicode.com/users`).subscribe(
    (users) => this.handleSubscribedResponse(users, count)
  );
}

handleSubscribedResponse(users: any[], count: number) {
  for(let i=0; i<count; i++) {
    this.employees.push(users[i]);
  }
  console.log(this.employees);
}

方法二：使用bind绑定额外参数 #

通过bind将this和count绑定到处理方法上，注意绑定的参数会排在subscribe回调的默认参数（响应数据）之前：

constructor(private _http: HttpClient) { this.fetchUsers(5); }
employees: any[] = [];

fetchUsers(count: number) {
  this._http.get(`https://jsonplaceholder.typicode.com/users`).subscribe(
    this.handleSubscribedResponse.bind(this, count)
  );
}

handleSubscribedResponse(count: number, users: any[]) {
  for(let i=0; i<count; i++) {
    this.employees.push(users[i]);
  }
  console.log(this.employees);
}

方法三：结合RxJS的map操作符 #

利用RxJS的管道操作，在subscribe前通过map传递参数并处理逻辑，更符合响应式编程风格：

import { map } from 'rxjs/operators';

constructor(private _http: HttpClient) { this.fetchUsers(5); }
employees: any[] = [];

fetchUsers(count: number) {
  this._http.get(`https://jsonplaceholder.typicode.com/users`)
    .pipe(
      map(users => this.processUsers(users, count))
    )
    .subscribe(() => console.log(this.employees));
}

processUsers(users: any[], count: number) {
  for(let i=0; i<count; i++) {
    this.employees.push(users[i]);
  }
}

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