Question

我必须链接2个API调用，我想在组件中接收上一次调用的数据，或者处理任何错误。

这是我的组件，它将启动初始API调用。

组件

  public handleSubmit(){
    if(this.loginForm.valid) {
      this.authService.authenticate(this.authRequest)
      .subscribe(
        data => console.log(data),
        error => console.log(error)
      );
    }
  }

服务

我的authenticate通话可以成功或失败。如果失败，我想抛出一个错误，如果成功，则应该开始第二次调用。

authenticate(request: models.AuthenticationRequest) {

    ...

    return this.httpClient.get(environment.auth.ssoAuthorize,
    { 
        headers: headers,
        params: params
    }).pipe(
        map((response: {code: string}) => {
            if(response.code){
                this.getAuthenticationToken(response.code).subscribe(
                    data => { return data }
                )
            }
        }),
        catchError(error => this.handleError(error))
    );
}

这是最后一次调用，此调用接收我必须发送到组件的数据。

getAuthenticationToken(code: string): Observable<any> { 

    ...

    return this.httpClient.post(environment.auth.token, {}, {
        headers: headers,
        params: params,
    }).pipe(
        map((response: models.AuthenticationTokenResponse) => {
            if(response.access_token){
                localStorage.setItem('authToken', JSON.stringify(response));
                return true;
            }
            return false;
        }),
        catchError(error => this.handleError(error))
    );
}

Answer 1

要连接两个Observable，一个依赖于另一个，使用switchMap。（如果可观察对象是独立的，则可以使用forkJoin。

SwitchMap就像：

return observable1.pipe(
      switchMap(res=>{
           //here we can use res
           console.log(res)
           //but we can not return res, we can return
           return observable2(res)
      });

以您的情况

authenticate()
{
    return this.httpClient.get(environment.auth.ssoAuthorize,
    { 
        headers: headers,
        params: params
    }).pipe(
        switchMap((response: {code: string}) => {
            //we not want return response, we can return:
            if(response.code){
                return this.getAuthenticationToken(response.code)
            }
            else   //we must return an observable
            {
                return Observable.of(false);
            }
        }),
        catchError(error => this.handleError(error))
    );

如何链接多个API调用

1 个答案: