角度2承諾可觀察

Question

遵循Angular 2教程。 我正在嘗試將以下方法從promises轉換為observables 。 我的嘗試在下面。

1）轉換正確嗎？

2）我將如何轉換getGroup()方法

getGroups（）

  // Promise
  getGroups(): Promise<Group[]> {
    return this.http.get(this.groupsUrl)
      .toPromise()
      .then(response => response.json().data as Group[])
      .catch(this.handleError);
  }
  // Observable
  getGroups(): Observable<Group[]> {
    return this.http.get(this.groupsUrl)
      .map(this.extractData)
      .catch(this.handleError);
  }
  private extractData(response: Response) {
    let body = response.json();
    return body.data || { };
  }

getGroup（）

  // Promise
  getGroup(id: number): Promise<Group> {
    return this.getGroups()
      .then(groups => groups.find(group => group.id === id));
  }
  // Observable
  // ================
  // HOW?
  // ================

創建組（）

  // Promise
  createGroup(name: string): Promise<Group> {
    return this.http
      .post(this.groupsUrl, JSON.stringify({name: name}), {headers: this.headers})
      .toPromise()
      .then(res => res.json().data)
      .catch(this.handleError);
  }
  // Observable
  createGroup(name: string): Observable<Group> {
    return this.http
      .post(this.groupsUrl, JSON.stringify({name: name}), {headers: this.headers})
      .map(res => res.json().data)
      .catch(this.handleError);
  }

updateGroup（）

  // Promise
  updateGroup(group: Group): Promise<Group> {
    const url = `${this.groupsUrl}/${group.id}`;
    return this.http
      .put(url, JSON.stringify(group), {headers: this.headers})
      .toPromise()
      .then(() => group)
      .catch(this.handleError);
  }
  // Observable
  updateGroup(group: Group): Observable<Group> {
    const url = `${this.groupsUrl}/${group.id}`;
    return this.http
      .put(url, JSON.stringify(group), {headers: this.headers})
      .map(() => group)
      .catch(this.handleError);
  }

deleteGroup（）

  // Promise
  deleteGroup(id: number): Promise<void> {
    const url = `${this.groupsUrl}/${id}`;
    return this.http
      .delete(url, {headers: this.headers})
      .toPromise()
      .then(() => null)
      .catch(this.handleError);
  }
  // Observable
  deleteGroup(id: number): Observable<void> {
    const url = `${this.groupsUrl}/${id}`;
    return this.http
      .delete(url, {headers: this.headers})
      .map(() => null)
      .catch(this.handleError);
  }

}

Answer 1

1）轉換正確嗎？

轉換似乎不正確。 通過將function引用傳遞給可觀察到的回調，您將失去this上下文。 您必須使用Arrow function與this ＆調用功能保持明確聯系。

// Observable
getGroups(): Observable<Group[]> {
    return this.http.get(this.groupsUrl)
      .map(this.extractData) //don't pass function reference
      .catch(this.handleError);
}

應該

// Observable
getGroups(): Observable<Group[]> {
  return this.http.get(this.groupsUrl)
    //.map(this.extractData.bind()) //this would work but its bad pattern
    .map(()=> this.extractData())
    .catch(this.handleError);
}

如果您在代碼中的某處執行了相同的操作，則對其他功能也應遵循相同的操作。

2）我將如何轉換getGroup（）方法

看起來就像下面

getGroup(id: number): Promise<Group> {
    return this.getGroups()
      .map(groups => groups.find(group => group.id === id));
}