[英]angular 2 promise to observable
Following along the Angular 2 tutorial. 遵循Angular 2教程。 I am trying to convert the following methods from promises
to observables
. 我正在尝试将以下方法从promises
转换为observables
。 My attempt is below. 我的尝试在下面。
1) Are the conversions corret? 1)转换正确吗?
2) How would I convert the getGroup()
method 2)我将如何转换getGroup()
方法
getGroups() 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() 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() 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() 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);
}
}
1) Are the conversions correct? 1)转换正确吗?
Conversion isn't seems to be correct. 转换似乎不正确。 By passing function
references to the observable callbacks you are going to lose this
context. 通过将function
引用传递给可观察到的回调,您将失去this
上下文。 You have to use Arrow function
to keep touch in with this
& call function explicitly. 您必须使用Arrow function
与this
&调用功能保持明确联系。
// Observable
getGroups(): Observable<Group[]> {
return this.http.get(this.groupsUrl)
.map(this.extractData) //don't pass function reference
.catch(this.handleError);
}
should be 应该
// 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);
}
Follow the same thing for other functions if you did same thing over somewhere in your code. 如果您在代码中的某处执行了相同的操作,则对其他功能也应遵循相同的操作。
2) How would I convert the getGroup() method 2)我将如何转换getGroup()方法
It will simply look like below 看起来就像下面
getGroup(id: number): Promise<Group> {
return this.getGroups()
.map(groups => groups.find(group => group.id === id));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.