Angular 阻塞(同步)http 调用

Question

我有一个 Angular 应用程序，它每 2 分钟更新一次 jwt。有一个潜在的问题是，当 jwt 正在更新时，用户可能会执行一些操作来触发另一个 http 调用与旧的 jwt 一起去。

如何确保 renewjwt() 在另一个潜在的 http 调用触发之前完成？

我最初的想法是在 renewjwt() 调用之前和完成后的回调函数中切换一个全局标志。

是否有使用原生 Angular 或 rxjs 实现此目的的好方法？

Answer 1

您可以使用 delayWhen 运算符，它会根据另一个可观察对象延迟发出的值。

为此，您可以像下面这样创建可观察对象:

function renewTokenIfNeeded$(): Observable<void> {
  console.log('Renew token start');
  /**
   * Here you should have have :
   * If current token is valid, 
   * ---- then return of(number),
   * else
   * ---- then return this.http.post([...])
   */
  // for demonstration prupose i always renew the token.
  return of(null).pipe(delay(
    Math.floor(Math.random() * 1000) + 1  
  ), tap(() => console.log('renew token stop')));

}

/**
 * Each 100 ms i trigger new dummy http request. By exhaustMap i will ignore all future "interval" emission until my dummy http request is complete stream.
 */
const renewTokensTimer$ = interval(100).pipe(exhaustMap(() => renewTokenIfNeeded$()));

数据流看起来像:

|...|...|...|................|...|...|...|

1/像这样，我有一个流，每 100 毫秒发出一个新数字，直到你认为你的电流是脏的。

2/然后它会执行http请求来获取新的。

3/在您耗尽 http 请求之前，interval source observable 不会发出新值。

然后你可以像下面这样简单地使用它:

of(null) // Create dummy observable.
    .pipe(delayWhen(() => renewTokenIfNeeded$())) // Delay it if token have to be renew.
    .pipe(mergeMap(() => myRegularHttpRequest$)) // perform my http request, i am 100% here i have fresh JWT
    .subscribe(console.log) // You can safely consume the API answer.

live poc