Как ограничить вызовы API в секунду с помощью angular2

Question

У меня есть лимит API 10 вызовов в секунду (однако тысячи в день), однако, когда я запускаю эту функцию (вызывается каждый идентификатор стиля объекта,> 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. Еще один наблюдаемый излучающий значение каждые 0,1 секунды.

Вы в конечном итоге с один наблюдаемых испускающих запросов каждые .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); 
} 

Надеюсь, вы сможете перевести свой код на ваш случай использования. Дайте знать, если у вас появятся вопросы.

UPDATE: Благодаря Адаму, есть также JSBin, показывающий, как задушить запросы, если они не приходят в последовательно (см Convo в комментариях). Он использует оператор concatMap() вместо оператора zip().

Answer 2

Пока я не тестировал этот код, я бы попробовал что-то в этом направлении.

В основном я создаю переменную, которая отслеживает, когда разрешен следующий запрос. Если это время не прошло, и появится новый запрос, он будет использовать 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; 
    } 
} 

Answer 3

Вы можете использовать синхронизированную 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, который показывает его в действии