从被拒绝的 Promise 中返回 Observable

Question

我正在尝试确定如何/是否可以将 Promise 拒绝转换为类型化的 Observable。

我有一个登录组件，具有这样的功能...

login() {
  const login$ = this.authenticationService.login(this.loginForm.value)
  login$
  .pipe(
    finalize(() => {
      this.loginForm.markAsPristine();
      this.isLoading = false;
    }),
    untilDestroyed(this)
  )
  .subscribe(
    (credentials) => {
      log.debug(`${credentials.username} successfully logged in`);
      this.router.navigate([this.route.snapshot.queryParams.redirect || '/'], { replaceUrl: true });
    },
    (error) => {
      log.debug(`Login error: ${error}`);
      this.error = error;
    }
  )
}

以及使用类似方法的身份验证服务...

login(context: LoginContext): Observable<Credentials> {

  var data = {} as Credentials
  
  // Call a method that returns a Promise
  this.server.authenticate(LoginContext)
  .then((result) -> {
      data.username = result.user.username
      data.token = result.accessToken
      this.credentialsService.setCredentials(data, context.remember)
      // Not sure what to do here...need to return data somehow as an Observable
      // return data
    })
  .catch((err) => {
      // Not sure what to do here either...need to bubble the err up so that it's caught in subscribe
      // return throwError(err)
    })
}

如果 Promise 解决，我如何返回 Observable<Credentials>，如果它拒绝，我如何冒泡错误？

我知道如果我将身份验证服务函数更改为返回 Promise<Observable<Credentials>>，我可以让一切正常工作，这很好，但为了学习新事物，我试图弄清楚这是否可能。

Answer 1

您可以使用from function 将任何Promise 转换为Observable：

import { from } from 'rxjs';

// ...

class YourClass {
  login(context: LoginContext): Observable<Credentials> {
    return from(this.server.authenticate(LoginContext).then(result => {
      const credentials: Credentials = {
        username: result.user.username,
        token: result.accessToken
      }; 
      this.credentialsService.setCredentials(credentials, context.remember);
      return credentials;
    }));
  }
}