角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? 
    // ================ 

createGroup（）

// 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)); 
}