使用 Promises 链接 Observable 以进行常见错误处理 - Angular

Question

我正在编写一个使用最新版本 Angular 框架的应用程序。我遇到了一个问题——我的一些方法 return observables，还有一些 return promises。是否可以将它们链接起来以便为链中的所有请求定义一个 catch 块？（我的意思是你通常只承诺的方式）。

看看这个代码示例：

loginToBackendServer(token: string) {
return new Promise ((resolve, reject) => {
  this.userService.loginUserWithFb().subscribe(backendUser => {
    this.facebookProvider.getBasicUserData().then(profile => {
      let userData = {
        id: backendUser['id'],
        facebookId: profile['id'],
        picture: profile['picture_large']['data']['url'],
        name: profile['name']
      };
      this.userService.userData = userData;
      this.sharedService.emitUserData(userData);
      this.storage.set("fbAccessToken", token);
      resolve();
    })
      .catch(error => {
        console.log(error);
        reject();
      })
  }, error => {
    console.log(error);
    reject();
  });
});

}

如何链接 .subscribe() 和 .then() 以便我只有一个 catch 块而不必单独处理错误？

谢谢大家！

Answer 1

您不需要使用新的承诺来链接所有响应并在一点上捕获错误。通过使用 fromPromise 和 concatMap 允许您链接并保持代码组织（请注意，我使用的是 the pipeable operators，强烈建议这样做）。

import { fromPromise } from 'rxjs/observable/fromPromise';
import { concatMap } from 'rxjs/operators';

...

loginToBackendServer(token: string) {
      this.userService.loginUserWithFb().pipe(
          concatMap(backendUser => fromPromise(this.facebookProvider.getBasicUserData()))
      ).subscribe(profile => {
          let userData = {
              id: backendUser['id'],
              facebookId: profile['id'],
              picture: profile['picture_large']['data']['url'],
              name: profile['name']
          };

          this.userService.userData = userData;
          this.sharedService.emitUserData(userData);
          this.storage.set("fbAccessToken", token);
      }, error => {
          console.log(error);
      });
  }

使用 Promises 链接 Observable 以进行常见错误处理 - Angular

Chaining Observable with Promises for common error handling - Angular

chaining

promise

observable

angular