如何在此函数中提供 Observable？答案

【问题标题】：How can I provide an Observable in this function?如何在此函数中提供 Observable？
【发布时间】：2020-03-20 00:32:27
【问题描述】：

当我将一组凭据发布到我的 api 并取回我想要存储的数据时，在应该进行登录过程时出现以下错误。

错误：TypeError：您提供了流所在的无效对象预期的。您可以提供 Observable、Promise、Array 或 Iterable。

这是我的代码：我也尝试过这个版本 this.user['user_id'] 而不是 res['user_id']，但后来我收到一个错误，它无法读取 null 的 user_id。

首先我的服务发布凭据并负责存储：

user = null;
  refreshToken = null;
  private authenticationState = new BehaviorSubject(false);
  public authenticationState$ = this.authenticationState.asObservable();
...
checkToken() {
       this.storage.get(TOKEN_KEY).then(access => {
           if (access) {
               this.user = this.helper.decodeToken(access);
               this.authenticationState.next(true);
           }
           else {
            this.storage.get(REFRESH_TOKEN_KEY).then(reaccess => {
                this.user = this.helper.decodeToken(reaccess);
                this.authenticationState.next(true);
            });
           }
       });
   }

 apilogin(username: string, password: string) {
    return this.http.post<any>(`http://127.0.0.1:8000/api/token/`, { username, password })
    .pipe(
        switchMap((res: any) => {
            // run all in paralell
            return forkJoin(
                this.storage.set(TOKEN_KEY, res['access']),
                this.storage.set(USERNAME_KEY, username),
                this.storage.set(USER_ID, res['user_id']),
                this.user = this.helper.decodeToken(res['access'])
            );
          }),
    // now we know for sure storage values have been set,
    // therefore call checkToken()
        tap(() => this.checkToken()),
        catchError(e => {
            this.showAlert('Oops smth went wrong!');
            throw new Error(e);
        }));

}

apilogout() {
      this.storage.remove(USER_ID),
      this.storage.remove(REFRESH_TOKEN_KEY),
      this.storage.remove(USERNAME_KEY),
      this.storage.remove(TOKEN_KEY)
  }

这是我的登录页面。在这里我总是出错，这就是记录此错误的地方。

apiSubmit() {
  console.log('Hello World');
  this.submitted = true;

  // if form is invalid => stop
  if (this.loginForm.invalid) {
      return;
  }
  this.isLoading = true;
  this.loadingEl.present();
  this.authService.apilogin(
  this.f.username,
  this.f.password)
      .pipe(tap(x => this.loadingEl.dismiss()),
      )
      .subscribe(
        data => {
          console.log('0');
          this.router.navigate([this.returnUrl]);
        },
        error => {
          console.log('1');
          this.loadingEl.dismiss();
          this.error = error;
          console.log(error);
          this.isLoading = false;
        }
      );
}

【问题讨论】：

我猜你的 forkJoin 的 1+ 个参数是一个普通对象
这是什么意思？
你确定forkJoin里面的参数都是observables吗？

标签： javascript angular typescript ionic-framework rxjs

【解决方案1】：

这看起来像你在forkJoin 中的所有参数都是一个普通对象，它不会接受并抛出你所说的错误。您可以使用 rxjs 将它们转换为可观察的超级简单，它应该可以正常工作。

 // import the of function
 import { of } from 'rxjs';

 // rest of your code goes here, just showing you have to import the above

 apilogin(username: string, password: string) {
    return this.http.post<any>(`http://127.0.0.1:8000/api/token/`, { username, password })
    .pipe(
        switchMap((res: any) => {
            this.user = this.helper.decodeToken(res['access'])
            // run all in paralell
            return forkJoin(
                of(this.storage.set(TOKEN_KEY, res['access'])),
                of(this.storage.set(USERNAME_KEY, username)),
                of(this.storage.set(USER_ID, res['user_id'])),
                of(this.user)
            );
          }),
    // now we know for sure storage values have been set,
    // therefore call checkToken()
        tap(() => this.checkToken()),
        catchError(e => {
            this.showAlert('Oops smth went wrong!');
            throw new Error(e);
        }));

}

【讨论】：