Angular 中的延迟 HTTP 请求答案

【问题标题】：Delayed HTTP Request in AngularAngular 中的延迟 HTTP 请求
【发布时间】：2018-07-18 13:33:15
【问题描述】：

我很好奇。我只是尝试使用.pipe( delay( 5000 ) )... 延迟 Angular (6.x) 中的 HTTP 请求，但看起来 RxJS 只是延迟了最终响应而不是服务器调用。但我真的需要延迟真正的服务器调用。通过 HttpInterceptor 在 AngularJS 中这不是问题，但我无法让它工作。有什么想法吗？

提前致谢。

更新：

我已经尝试过 HttpInterceptor 但这也不起作用。我有一个 CustomHttpClient ，它将正在运行的请求 url 放在一个数组中，并在完成后将它们删除。某些请求无法并行运行，因此我必须检查列表中的待处理呼叫，例如/api/somePath.如果这样的 url 在列表中，则必须延迟当前请求。在 AngularJS 的 HttpInterceptor 中工作正常。

【问题讨论】：

windows.setTimeout( () => { /* 你的延迟代码 */ }, 5000)
为什么要延迟http调用？？
@DeependerSharma 可能是为了避免速率限制

标签： angular rxjs rxjs6

【解决方案1】：

我喜欢那些拦截器，因为你可以用它们做很多魔法。

在拦截器中处理http调用的响应

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      tap(response=> console.log(response) )  // <== or do some other magic
    );
  }
}

在拦截器中处理 http 调用的请求，例如延迟它。

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return timer(2000).pipe(         // <== Wait 2 Seconds
      switchMap( ()=> next.handle(request) )   // <== Switch to the Http Stream
    )
  }
}

在这两种情况下，它都是相同的“intercept(...)”方法，但对“next.handle()”的处理不同。

热烈的问候

【讨论】：

【解决方案2】：

如果你想用 RxJS 延迟调用本身，你可以使用timer:

timer(5000)
  .pipe(
    concatMap(() => of(42)),
  )
  .subscribe(...)

【讨论】：

你不需要take(1)，timer(5000) 发出一次并解析。

【解决方案3】：

您可以再次使用@angular/common/http 中的HttpInterceptor 为您执行此操作。

或者只是：

Observable.timer(5000).pipe(tap( // do your stuff ))

【讨论】：

我已经尝试过HttpInterceptor，但这也不起作用。我有一个CustomHttpClient，它将正在运行的请求 url 放在一个数组中，并在完成后将它们删除。某些请求无法并行运行，因此我必须检查列表中的待处理呼叫，例如/api/somePath。如果这样的 url 在列表中，则必须延迟当前请求。

【解决方案4】：

从不同的 observable（在本例中为 timer observable）开始，然后切换到您的 http 客户端 observable：

timer(1000).pipe(
 switchMap(() => this.http.get('')),
)
.subscribe();

或

of(null).pipe(
 delay(1000),
 switchMap(() => this.http.get('')),
)
.subscribe();

【讨论】：

【解决方案5】：

你可以使用 RxJS Observable.timer

let myRequest = this.http.get(...);
let pollingSubscription = myRequest
 .expand(() => Observable.timer(5000).flatMap(() => myRequest))
 .subscribe();

【讨论】：