如何使用 angular2 限制每秒 API 调用次数

Question

我的 API 限制为每秒 10 次调用（但每天数千次），但是，当我运行此函数时（调用对象的每个样式 ID，> 每秒 10 次）：

  getStyleByID(styleID: number): void {
    this._EdmundsAPIService.getStyleByID(styleID).subscribe(
      style => {this.style.push(style); },
      error =>  this.errorMessage = <any>error);
  }

从此函数（仅 1 次调用，使用 onInit）：

  getStylesWithoutYear(): void {
    this._EdmundsAPIService.getStylesWithoutYear(this.makeNiceName, this.modelNiceName, this.modelCategory)
      .subscribe(
        styles => { this.styles = styles;
                      this.styles.years.forEach(year =>
                        year.styles.forEach(style =>
                          this.getStyleByID(style.id)));

        console.log(this.styles); },
        error =>  this.errorMessage = <any>error);
  }

它每秒发出超过 10 次调用。如何限制或减慢这些调用以防止出现 403 错误？

Answer 1

我有一个非常简洁的解决方案，您将两个可观察对象与.zip() operator结合起来：

1. 发出请求的可观察对象。
2. 另一个 observable 每 0.1 秒发出一个值。

您最终会每 0.1 秒发出一个可观察到的发出请求（= 每秒 10 个请求）。

这是代码 (JSBin)：

// Stream of style ids you need to request (this will be throttled).
const styleIdsObs = new Rx.Subject<number>();

// Getting a style means pushing a new styleId to the stream of style ids.
const getStyleByID = (id) => styleIdsObs.next(id);

// This second observable will act as the "throttler".
// It emits one value every .1 second, so 10 values per second.
const intervalObs = Rx.Observable.interval(100);

Rx.Observable
  // Combine the 2 observables. The obs now emits a styleId every .1s. 
  .zip(styleIdsObs, intervalObs, (styleId, i) => styleId)
  // Get the style, i.e. run the request.
  .mergeMap(styleId => this._EdmundsAPIService.getStyleByID(styleId))
  // Use the style.
  .subscribe(style => {
    console.log(style);
    this.style.push(style);
  });

// Launch of bunch of requests at once, they'll be throttled automatically.
for (let i=0; i<20; i++) {
  getStyleByID(i);
}

希望您能够将我的代码翻译成您自己的用例。如果您有任何问题，请告诉我。

更新：感谢 Adam，还有一个 JSBin 展示了如果请求不一致时如何限制请求（请参阅 cmets 中的 convo）。它使用concatMap() 运算符而不是zip() 运算符。

Answer 2

您可以使用每 n 毫秒触发一次的定时Observable。我没有修改你的代码，但这个显示了它是如何工作的：

someMethod() {
  // flatten your styles into an array:
  let stylesArray = ["style1", "style2", "style3"];

  // create a scheduled Observable that triggers each second
  let source = Observable.timer(1000,1000);
  // use a counter to track when all styles are processed
  let counter = 0;

  let  subscription = source.subscribe( x => {
    if (counter < stylesArray.length) {
        // call your API here
        counter++;
    } else {
        subscription.complete();
    }
  });
}

在这里找到一个plunk 来展示它的实际效果

Answer 3

虽然我没有测试这段代码，但我会尝试这些方面的东西。

基本上，我创建了一个变量来跟踪何时允许发出下一个请求。如果该时间尚未过去，并且有新请求进来，它将使用setTimeout 允许该函数以适当的时间间隔运行。如果delayUntil 的值是过去的，那么请求可以立即运行，并且还可以将定时器从当前时间推后100毫秒。

delayUntil = Date.now();

getStylesWithoutYear(): void {
  this.delayRequest(() => {
    this._EdmundsAPIService.getStylesWithoutYear(this.makeNiceName, this.modelNiceName, this.modelCategory)
      .subscribe(
        styles => { this.styles = styles;
                    this.styles.years.forEach(year =>
                      year.styles.forEach(style =>
                        this.getStyleByID(style.id)));

        console.log(this.styles); },
        error =>  this.errorMessage = <any>error);
  };        
}

delayRequest(delayedFunction) {
  if (this.delayUntil > Date.now()) {
    setTimeout(delayedFunction, this.delayUntil - Date.now());
    this.delayUntil += 100;
  } else {
    delayedFunction();
    this.delayUntil = Date.now() + 100;
  }
}