Angular2 observables 与 promises
Angular2 observables vs. promises
我目前正在开发一个 Web 应用程序,它必须从 SQL- 数据库(比如一些员工或工作计划)加载一组数据。每次当你被路由到一个组件时,如果你更新数据,它就会被发送到服务器和 returns 某种成功或错误消息。
目前我使用可观察对象,但它们的行为并不像我想要的那样。我订阅了一个 observable,接收我的数据并取消订阅(我也不确定在哪里取消订阅。在 onDestroy 或我的 sub 的 Complete
部分?)。但不知何故,它仍然是异步的,因为代码执行在接收到导致我的应用程序失败的所有数据之前继续执行。
这是我的实现示例:
员工组件:
getEmployees(department: any){
this.employeesSub = this.employeeManagementService.getEmployees(department).subscribe(
//Sucess
data => {this.employees = data},
//Error
err => this.logger.error(err),
//Complete
() => {this.logger.log('done loading');
}
);
}
ngOnInit(){
this.selectedDepartment = this.ccs.getSelectedDepartment();
//Does the same type of request as getEmployees()
this.getDepartments();
this.paramSub = this.route.params.subscribe(
//Success
params => {
//doStuff
}
},
//Error
err => this.logger.error(err),
//Complete
() => {}
);
}
ngOnDestroy(){
this.employeesSub.unsubscribe();
this.paramSub.unsubscribe();
}
员工服务:
getEmployees(department: string): Observable<Employee[]>{
let method = "getEmployees";
let body = JSON.stringify({method, department});
this.logger.log(body);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(this.url, body, options)
.map((res:Response) =>{
this.logger.log(res.json());
return res.json();
}).catch(this.handleError);
}
我知道这里可能经常有人问这个问题。但是我真的不确定其中的区别,即使我读了越来越多的帖子我也不会明白。有人可以花点时间帮助我吗?
取消订阅有点多余,因为从 this._http.xxx()
返回的可观察对象在第一个事件后关闭,这导致订阅无论如何都会被取消。
为了保证在你这边,你也可以使用this._http.xxx().first().subscribe(...)
。这样,无论发送者打算发出多少事件,订阅都会在第一个事件后关闭。
不等待响应而继续执行代码是异步执行的本质,与使用 promise 或 observable 非常相似。
如果您希望代码在数据到达后执行,您必须将该代码移动到 subscribe(...)
、map(...)
或其他一些可观察的运算符中。
承诺:
在 time 仅发出一个值。
在没有 then and catch 的情况下调用服务。
无法取消。
不提供任何操作员。
可观察到:
在一段时间内发出多个值。
在我们订阅 observable 之前它不会被调用
提供map、forEach、filter、reduce、retry和retry when。
它们是稍后订阅的函数
懒惰
看看这篇文章:https://scholarbasta.com/promises-vs-observables/
Promise 用于以下情况,
- 活动一气呵成。
- 事件只发出一个值,
- 您确实不需要取消订阅此活动。
在以下情况下使用可观察对象:
- 您需要取消订阅此活动,
- 正在发出多个流,您需要对它们执行各种操作。
- 假设您需要过滤/映射一些值。 Rxjs 库在这方面非常强大。
- 同一来源有多个值。
我目前正在开发一个 Web 应用程序,它必须从 SQL- 数据库(比如一些员工或工作计划)加载一组数据。每次当你被路由到一个组件时,如果你更新数据,它就会被发送到服务器和 returns 某种成功或错误消息。
目前我使用可观察对象,但它们的行为并不像我想要的那样。我订阅了一个 observable,接收我的数据并取消订阅(我也不确定在哪里取消订阅。在 onDestroy 或我的 sub 的 Complete
部分?)。但不知何故,它仍然是异步的,因为代码执行在接收到导致我的应用程序失败的所有数据之前继续执行。
这是我的实现示例:
员工组件:
getEmployees(department: any){
this.employeesSub = this.employeeManagementService.getEmployees(department).subscribe(
//Sucess
data => {this.employees = data},
//Error
err => this.logger.error(err),
//Complete
() => {this.logger.log('done loading');
}
);
}
ngOnInit(){
this.selectedDepartment = this.ccs.getSelectedDepartment();
//Does the same type of request as getEmployees()
this.getDepartments();
this.paramSub = this.route.params.subscribe(
//Success
params => {
//doStuff
}
},
//Error
err => this.logger.error(err),
//Complete
() => {}
);
}
ngOnDestroy(){
this.employeesSub.unsubscribe();
this.paramSub.unsubscribe();
}
员工服务:
getEmployees(department: string): Observable<Employee[]>{
let method = "getEmployees";
let body = JSON.stringify({method, department});
this.logger.log(body);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(this.url, body, options)
.map((res:Response) =>{
this.logger.log(res.json());
return res.json();
}).catch(this.handleError);
}
我知道这里可能经常有人问这个问题。但是我真的不确定其中的区别,即使我读了越来越多的帖子我也不会明白。有人可以花点时间帮助我吗?
取消订阅有点多余,因为从 this._http.xxx()
返回的可观察对象在第一个事件后关闭,这导致订阅无论如何都会被取消。
为了保证在你这边,你也可以使用this._http.xxx().first().subscribe(...)
。这样,无论发送者打算发出多少事件,订阅都会在第一个事件后关闭。
不等待响应而继续执行代码是异步执行的本质,与使用 promise 或 observable 非常相似。
如果您希望代码在数据到达后执行,您必须将该代码移动到 subscribe(...)
、map(...)
或其他一些可观察的运算符中。
承诺:
在 time 仅发出一个值。
在没有 then and catch 的情况下调用服务。
无法取消。
不提供任何操作员。
可观察到:
在一段时间内发出多个值。
在我们订阅 observable 之前它不会被调用
提供map、forEach、filter、reduce、retry和retry when。
它们是稍后订阅的函数
懒惰
看看这篇文章:https://scholarbasta.com/promises-vs-observables/
Promise 用于以下情况,
- 活动一气呵成。
- 事件只发出一个值,
- 您确实不需要取消订阅此活动。
在以下情况下使用可观察对象:
- 您需要取消订阅此活动,
- 正在发出多个流,您需要对它们执行各种操作。
- 假设您需要过滤/映射一些值。 Rxjs 库在这方面非常强大。
- 同一来源有多个值。