Angular 6 中的 $q.when、$q.defer & defer.promise 使用 Observable 的替代品是什么
What is the replacement for $q.when, $q.defer & defer.promise in Angular 6 using Observable
我正在从 Angularjs 升级到 Angular 6,在 AngularJS 中他们使用 Promises 和一些 $q 函数,我找不到一些替代品功能。我正在寻找 $q.when、$q.defer、Defer.resolve() 和 Defer.promise 的替代品。如何使用 Observable 实现这一点?
common.$q.when(checkDuplicate()).then(function (dupSc) {
if(dupsc.length !== 0){
some functions...
}}
function checkDuplicate() {
var defer = common.$q.defer();
var url = "XYZ"
dataService.getData(url).then(function (response) {
defer.resolve(response.value);
});
return defer.promise;
}
现在我想使用 Observable 将所有这些函数转换为 Angular6 任何人都可以建议用示例替换 Angular6 中的这个的最佳方法。
据我所知,没有一对一的比较。 $q
本质上是 Promise
的实现,并且由于 Angular 切换到使用 RxJs
,因此没有一对一的映射。但是,您可以用 $q
做的任何事情在 RxJs
中都可以以稍微不同的方式实现。
由于这取决于您的设计要求,您希望如何实现您的可观察对象,我无法给出所有情况的示例,但我最近不得不转换我自己的 Angular1 项目(使用$q.defer()
) 到 Angular7(现在使用 RxJs
observables),这里是一个例子。
在 angular1 中,搜索功能是:当用户键入时,调用后端以获取搜索数据,但一旦用户键入更多内容就取消该请求,return 最新数据,即就像在 google。我为此使用 defer()
。
在 angular2 中,使用 switchMap 可以实现相同的功能。 switchMap
将丢弃所有先前生成的事件,但新事件的结果尚不可用,并等待新事件的结果。这与过早解决 defer()
承诺相同。下面是我的 angular2 搜索功能的代码。
fromEvent(this.searchTextInput.nativeElement, 'keyup')
.pipe(
map((event: KeyboardEvent) => {
return event.target
}),
debounceTime(1000),
switchMap((searchInput: HTMLInputElement) => {
this.searchInProgress = true
this.searchText = searchInput.value
if (this.searchText.length > 0) {
return this.pluginService.searchPlugins(searchInput.value)
} else {
return EMPTY
}
})
)
.subscribe({
next: (plugins: Plugin[]) => {
this.searchInProgress = false
this.searchResults = plugins
},
error: (error: HttpErrorResponse) => {
this.searchInProgress = false
this.errorChange.emit(error)
}
})
我正在从 Angularjs 升级到 Angular 6,在 AngularJS 中他们使用 Promises 和一些 $q 函数,我找不到一些替代品功能。我正在寻找 $q.when、$q.defer、Defer.resolve() 和 Defer.promise 的替代品。如何使用 Observable 实现这一点?
common.$q.when(checkDuplicate()).then(function (dupSc) {
if(dupsc.length !== 0){
some functions...
}}
function checkDuplicate() {
var defer = common.$q.defer();
var url = "XYZ"
dataService.getData(url).then(function (response) {
defer.resolve(response.value);
});
return defer.promise;
}
现在我想使用 Observable 将所有这些函数转换为 Angular6 任何人都可以建议用示例替换 Angular6 中的这个的最佳方法。
据我所知,没有一对一的比较。 $q
本质上是 Promise
的实现,并且由于 Angular 切换到使用 RxJs
,因此没有一对一的映射。但是,您可以用 $q
做的任何事情在 RxJs
中都可以以稍微不同的方式实现。
由于这取决于您的设计要求,您希望如何实现您的可观察对象,我无法给出所有情况的示例,但我最近不得不转换我自己的 Angular1 项目(使用$q.defer()
) 到 Angular7(现在使用 RxJs
observables),这里是一个例子。
在 angular1 中,搜索功能是:当用户键入时,调用后端以获取搜索数据,但一旦用户键入更多内容就取消该请求,return 最新数据,即就像在 google。我为此使用 defer()
。
在 angular2 中,使用 switchMap 可以实现相同的功能。 switchMap
将丢弃所有先前生成的事件,但新事件的结果尚不可用,并等待新事件的结果。这与过早解决 defer()
承诺相同。下面是我的 angular2 搜索功能的代码。
fromEvent(this.searchTextInput.nativeElement, 'keyup')
.pipe(
map((event: KeyboardEvent) => {
return event.target
}),
debounceTime(1000),
switchMap((searchInput: HTMLInputElement) => {
this.searchInProgress = true
this.searchText = searchInput.value
if (this.searchText.length > 0) {
return this.pluginService.searchPlugins(searchInput.value)
} else {
return EMPTY
}
})
)
.subscribe({
next: (plugins: Plugin[]) => {
this.searchInProgress = false
this.searchResults = plugins
},
error: (error: HttpErrorResponse) => {
this.searchInProgress = false
this.errorChange.emit(error)
}
})