时间戳

首页 > 解决方案 > 在显示 toast 消息之前，如何确保我的所有 observables 都已完成？

angular - 在显示 toast 消息之前，如何确保我的所有 observables 都已完成？

问题描述

我有一个场景，我必须进行一些 api 调用，然后显示一些 toast 消息，通知用户调用是成功还是失败。在下面的代码中，该processSaveResponses方法在可观察对象被解析之前被调用。该processSaveResponses方法负责显示 toast 消息。我理解这是预期的行为，因为 observable 是异步的，但我不知道如何“等待”observable 完成的单元。

和方法相互独立，但deliveryPreferencesService.save如果失败则不应调用。deliveryPreferencesService.saveAutoEnrolldeliveryPreferencesService.saveAutoEnrolldeliveryPreferencesService.save

  private saveChanges(changeSet: DeliveryPreferencesChangeSet) {

    let deliveryPrefernceResult;
    let saveAutoEnroll = true;

    const { accountPreferences: accountPreferenceChanges, autoEnrollPreferences: autoEnrollPreferenceChanges } = changeSet.changes;

    if (accountPreferenceChanges.length) {
      this.deliveryPreferencesService.save(accountPreferenceChanges).
        subscribe(
          () => deliveryPrefernceResult = true,
          () => saveAutoEnroll = false);
    }

    if (autoEnrollPreferenceChanges.length) {
      if (saveAutoEnroll) {
        this.deliveryPreferencesService.saveAutoEnroll(autoEnrollPreferenceChanges).
          subscribe(
            () => console.log('save auto enroll completed'),
            () => saveAutoEnroll = false);
      }
    }

    this.processSaveResponses([{ success: deliveryPrefernceResult }, {success: saveAutoEnroll}]);
  }

这是代码processSaveResponses：

    if (every(responses, ['success', false])) {
      this.showErrorToastr(this.ALL_CHANGES_FAILURE_MESSAGE);
    }
    else if (every(responses, ['success', true])) {
      this.originalPreferences = cloneDeep(this.currentPreferences);
      this.onChange.next();
      this.showSuccessToastr(this.ALL_CHANGES_SUCCESS_MESSAGE);
    }
    else {
      if ((responses[0] as any).success) {
        this.originalPreferences.accountPreferenceSets = cloneDeep(this.currentPreferences.accountPreferenceSets);
        this.showSuccessToastr(this.DELIVERY_PREFERENCES_SUCCESS_MESSAGE);
        this.showErrorToastr(this.AUTO_ENROLL_FAILURE_MESSAGE);
      } else {
        this.originalPreferences.autoEnrollPreferences = cloneDeep(this.currentPreferences.autoEnrollPreferences);
        this.showSuccessToastr(this.AUTO_ENROLL_SUCCESS_MESSAGE);
        this.showErrorToastr(this.DELIVERY_PREFERENCES_FAILURE_MESSAGE);
      }
    }
  }

任何帮助，将不胜感激。我正在使用 rxjs 版本 5.5.2。

标签： angulartypescriptrxjsobservablerxjs5

解决方案

尝试switchMap按照此处所述使用。我想它可以在你的情况下使用。 https://www.learnrxjs.io/operators/transformation/switchmap.html

this.deliveryPreferencesService.save(accountPreferenceChanges)
  .pipe(
    switchMap(x => this.deliveryPreferencesService.saveAutoEnroll(autoEnrollPreferenceChanges))
  )
  .subscribe(() => {
    // TODO something
  })

在这种情况下this.deliveryPreferencesService.saveAutoEnroll(autoEnrollPreferenceChanges)，只有在成功后才会调用this.deliveryPreferencesService.save(accountPreferenceChanges)

推荐阅读