RXJS throttletime 运算符在 Angular 中不工作

Question

我有一种方法可以对服务器进行 http 调用。此方法被调用了 500 次，导致页面崩溃。我想分开通话并在通话之间延迟 200 毫秒。我想过使用 throttletime 运算符，但它不起作用。

testSubject: Subject<number> = new Subject<number>();


testMethod(id){
   for(let i = 0; i < 500; i++){
     this.testSubject.next(this.counter);
     this.testSubject.pipe(throttleTime(200)).subscribe(
        (data:any) =>{
           return this.addRow(groupId);        
         }
        )
        this.counter++;
    }
}

我希望上面的代码能按如下方式工作：

计数器加 1
Subject.next() 触发以使用新值更新主题
在订阅 testSubject 时添加 throttletime。所以它应该延迟 200 毫秒

Answer 1

你可以这样做，如果你想等待请求完成直到你想发送下一个，你可以使用concatMap。使用 range 而不是 for 循环来迭代 500 次。

range(1, 500).pipe(
     concatMap(() => {
     return this.yourHttpService.addRow(groupId).pipe(throttleTime(200));
    })
   )
   .subscribe(() => {
     console.log('HTTP successful requests');
   });

这将在成功完成后重复 HTTP 请求，如果请求在 200 毫秒之前完成，则延迟 200 毫秒。

Answer 2

这就是您如何使用 concatMap 来确保一次只运行一个请求（到 addRow）。

// The Settup
const testSubject: Subject<number> = new Subject<number>();
testSubject.pipe(

  concatMap(_ => this.addRow(groupId))

).subscribe(JSONdataFromAddRow => {/* Do nothing */});


// Triggering 500 calls
let counter = 0;
for(let i = 0; i < 500; i++){
  testSubject.next(counter);
  counter++;
}

RXJS throttletime 运算符在 Angular 中不工作

RXJS throttletime operator is not working in Angular

throttling

rxjs

angular

rxjs-pipeable-operators