Angular RxJs : Poll HTTP request until timeout or positive response from server

标签 angular rxjs reactive-programming

我是 RxJs 的新手。我需要轮询一个 http 请求并继续轮询,直到我得到肯定的响应或指定的时间已经过去(不想永远轮询)。

我正在使用 Angular 8 和 Typescript。这是我的代码:

this.httpClient.get('http://localhost:8060/api/portal/v1/payment/fetch/' + shopId + '/0/10').pipe(
          repeatWhen(obs => obs.pipe(delay(5000))),
          filter((data: ResponseModel<any>) => {
            console.log('Data:' + data);
            return data.status === 'success';
          }),
          take(1)
        ).subscribe(result => {
          console.log('Result: ' + result);
        });

上面的代码适用于来自服务器的积极响应,但如果没有积极响应,它会永远轮询,这不是预期的效果。如何在上述功能中添加超时?

最佳答案

根据第一条评论中的建议,我调整了一些东西并最终得到了以下有效的东西

// Create an Observable that emits every 5 seconds
interval(5000).pipe(

          // Since the httpClient returns an Observable, wrap it with a switchMap
          switchMap(() => this.httpClient.get('http://localhost:8060/api/portal/v1/payment/fetch/' + shopId + '/0/10')),

          // Filter only the successful http responses
          filter((data: ResponseModel<any>) => {
            console.log('Data:' + JSON.stringify(data));
            return data.status === 'success';
          }),

          // Emit only the first value emitted by the source
          take(1),

          // Time out after 30 seconds
          timeout(30000),
        ).subscribe((result: ResponseModel<any>) => {

          console.log('Result: ' + JSON.stringify(result));

        }, error => {
          console.log('Error: ' + error);
        });

关于 Angular RxJs : Poll HTTP request until timeout or positive response from server,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63058012/

相关文章:

javascript - 在 TypeScript 中获取调用属性的名称

angular - 如何在 Angular2 中的所有请求的请求 header 中发送 "Cookie"?

Angular 2 官方例子 : strongly typed json object array mapping bug

javascript - React-router 不变违规 : The root route must render a single element

android - 错误 :(9, 0) 找不到参数的方法 compile() [io.reactivex :rxandroid:1. 2.1]

flutter - 使用 Flutter 和 Redux 或 AsyncRedux,如何将小部件与应用程序状态分离?

javascript - AppModule 中导入的共享模块

javascript - Angular 2+ 检查内容是否与父容器重叠

javascript - Observable 而不是 Promise with async\await

javascript - RxJS 轮询无限滚动时的行更新