Angular

Question

我有一个 Web 应用程序，有时需要使用令牌来访问我的第三方合作伙伴端点。

此令牌位于我的数据库中，并在我自己服务器的端点中获取。

我正在尝试构建一个仅在我的后端请求令牌的结构，这是第一次调用某些需要它的函数。当我已经有了令牌时，我将在我的局部变量上使用它。

export class Service {
    private readonly api_url: string = environment.API_URL;
    private token: string;

    getToken(): Observable<any> {
        // HTTP call to get the token on my own backend and return the token
    }

    partnerFirstFunction(): Observable<any> {
        if (!this.token)
            this.getToken().subscribe((response) => {
                this.token = response;

                var headers = new HttpHeaders({ 'Authorization': 'bearer ' + this.token });
                return this.http.request<any>('POST', 'partnerUrl', { headers: headers }).pipe(map(response => {
                    return response;
                }));
            });
        // I WANT TO PREVENT THE ABOVE CODE FROM REPEATING
        else {
            var headers = new HttpHeaders({ 'Authorization': 'bearer ' + this.token });
            return this.http.request<any>('POST', 'partnerUrl', { headers: headers }).pipe(map(response => {
                return response;
            }));
        }
    }

    partnerSecFunction(): Observable<any> {
        if (!this.token)
            this.getToken().subscribe((response) => {
                this.token = response;

                var headers = new HttpHeaders({ 'Authorization': 'bearer ' + this.token });
                return this.http.request<any>('POST', 'partnerUrl', { headers: headers }).pipe(map(response => {
                    return response;
                }));
            });
        // I WANT TO PREVENT THE ABOVE CODE FROM REPEATING
        else {
            var headers = new HttpHeaders({ 'Authorization': 'bearer ' + this.token });
            return this.http.request<any>('PATCH', 'partnerUrl', { headers: headers }).pipe(map(response => {
                return response;
            }));
        }
    }
}

我试图为我的令牌变量构建一个 get/set，在 get 方法中进行“已经存在”的验证，但是当需要请求令牌时，代码会继续而不等待请求。

private _token: string;
get token(): string {
    if (this._token == null)
        this.getToken().subscribe((response) => {
            return this._token;
        });
    else
        return this._token;

}

Answer 1

也许你应该使用

private static token: string;

因此该令牌字段将为服务的所有实例初始化一次class

Answer 2

您可以在 HTTP 请求中使用 shareReplay 运算符，并将其分配给一个可观察对象 token$，您可以使用它来获取令牌，然后 switch/merge 映射结果其他请求。

您可以尝试以下方法：

export class Service {
  token$: Observable<string>;

  constructor() {
    // shareReplay will share the result of the request for all subscribers
    // replace of('NEW_TOKEN') with your http request.
    this.token$ = of('NEW_TOKEN').pipe(shareReplay(1));
  }

  partnerFirstFunction(): Observable<any> {
    return this.token$.pipe(
      switchMap(token => {
        var headers = new HttpHeaders({
          Authorization: 'bearer ' + token
        });
        return this.http
          .request<any>('POST', 'partnerUrl', { headers: headers })
          .pipe(
            map(response => {
              return response;
            })
          );
      })
    );
  }

  partnerSecFunction(): Observable<any> {
    return this.token$.pipe(
      switchMap(token => {
        var headers = new HttpHeaders({
          Authorization: 'bearer ' + token
        });
        return this.http
          .request<any>('PATCH', 'partnerUrl', { headers: headers })
          .pipe(
            map(response => {
              return response;
            })
          );
      })
    );
  }
}

Angular - 仅在尚未请求值时使用 Observable

Angular - using an Observable only when value not requested yet

observable

rxjs