时间戳

首页 > 解决方案 > Angular 6 中使用 Observable 的 $q.when、$q.defer 和 defer.promise 的替代品是什么

angular - Angular 6 中使用 Observable 的 $q.when、$q.defer 和 defer.promise 的替代品是什么

问题描述

我正在从 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 将所有这些功能转换为 Angular 6，任何人都可以建议用示例替换 Angular 6 中的最佳方法。

标签： angularrxjsobservableangular-promise

解决方案

据我所知，没有一对一的比较。$q本质上是 的实现Promise，并且由于 Angular 切换到 using RxJs，因此没有一对一的映射。但是，您可以以稍微不同的方式进行任何$q操作RxJs。

由于这取决于您的设计要求，您希望如何实现您的 observables，因此我无法给出所有案例的示例，但我最近不得不将我自己的 Angular1 项目（使用$q.defer()）转换为 Angular7（现在使用RxJsobservables），并且这是一个例子。

在 angular1 中，搜索功能是：当用户输入时，调用后端来获取搜索数据，但一旦用户输入更多，就取消该请求，并返回最新数据，就像在 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)
    }
  })

推荐阅读