angular 服务中的依赖 HTTP 调用

Question

我正在从 angular 服务调用受保护的 REST API。在这种情况下，我必须在调用任何 API 之前获取令牌一次，因为它作为 HTTP Header 的一部分传递。但是每当我从我的组件调用任何函数时，我都会得到 app_token 未定义。这是由于对 token_api 的异步调用。下一次调用成功，因为之前的调用从服务器获取令牌值。

我在get_token函数中添加了async-await，但是没有用.. 关于如何处理这种情况的任何建议。

private app_token;

private getToken(){    
    if (this.token == undefined) {
      console.log("getting new token");
      return this.httpClient.post<Token>(this.TOKEN_API, body, options)
        .pipe(retry(3), catchError(this.handleError))
        .subscribe(data => {
            console.log(data[0].username);
            return this.app_token = data;
        });
    }
}

public getEmployee{
    this.getToken();

    const headers = new HttpHeaders()
      .set('Authorization', 'Bearer ' + this.app_token );

    const options = {
      headers: headers
    };

    return this.httpClient.get(this.EMP_API, options)
      .pipe(retry(3), catchError(this.handleError));
}

public getDepartments{
    this.getToken();

    const headers = new HttpHeaders()
      .set('Authorization', 'Bearer ' + this.app_token );

    const options = {
      headers: headers
    };

    return this.httpClient.get(this.DEPT_API, options)
      .pipe(retry(3), catchError(this.handleError));
}

Answer 1

使用 toPromise() 从 getToken() 将 observable 转换为 promise：

private getToken(){    
    if (this.token == undefined) {
      console.log("getting new token");
      return this.httpClient.post<Token>(this.TOKEN_API, body, options)
        .pipe(retry(3), catchError(this.handleError))
        .subscribe(data => {
            console.log(data[0].username);
            return this.app_token = data;
        })
        .toPromise();
    }
}

现在您可以轻松使用 async/await 此功能

public async getEmployee{
    await this.getToken();

    const headers = new HttpHeaders()
      .set('Authorization', 'Bearer ' + this.app_token );

    const options = {
      headers: headers
    };

    return this.httpClient.get(this.EMP_API, options)
      .pipe(retry(3), catchError(this.handleError));
}

注意：如果getToken()获取令牌失败，请处理错误。

Answer 2

最后，我找到了解决这个问题的方法。在这里，我使用 RxJS Pipe 和 concatMap 函数执行 2 个 http 请求并将一个请求的输出传递给其他请求。

  return this.getToken().pipe(
    concatMap((tokenData)=> {
      headers = headers.append('Authorization', 'Bearer ' + this.token.access_token);

      return this.httpClient.get(url, { headers: headers })
        .pipe( retry(3), catchError(this.handleError));
    })
  );

angular 服务中的依赖 HTTP 调用

Dependent HTTP calls in angular service

httpclient

angular

angular-httpclient