Managing API call limits using RxJs

Question

Managing API call limits using RxJs

Currently, I am in the process of developing an Angular application that utilizes an API provided by a social network. Unfortunately, this API has a restriction of only allowing 5 API calls per second.

The typical solution to this limitation involves implementing custom logic to track and queue requests based on the restrictions. If a 6th request is made within one second, it will be delayed until the next allowable time slot.

However, I am interested in exploring more elegant solutions using RxJs.

For example, I have considered setting the debounceTime for the Observable, as shown in the code snippet below. Yet, this approach presents limitations, as it prevents making multiple requests with intervals shorter than 200ms between them.

this.searchControl.valueChanges
    .debounceTime(200) // 200ms ~ 5 requests per second 
    .switchMap(search => this.api.searchPeople(search))

Are there any techniques within RxJs that can help restrict the number of emits per interval and queue excess requests when they are being sent too frequently?

angular typescript rxjs

Answer 1

Answer №1

If you're looking for a different approach with Angular, check out this custom interceptor built for Angular 8 and RxJS 6:

@Injectable()
export class RateLimitInterceptor implements HttpInterceptor {

  private readonly timeInterval = 1000 /* 1 second interval */;

  private availableRequests = 10 /* 10 requests allowed per interval */;

  private requestLimit$ = new BehaviorSubject(this.availableRequests);

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return this.requestLimit$.pipe(
      filter(() => this.availableRequests > 0),
      take(1),
      tap(() => this.decrementRequests()),
      tap(() => timer(this.timeInterval).subscribe(() => this.incrementRequests())),
      mergeMap(() => next.handle(req))
    );
  }

  private incrementRequests(): void {
    this.adjustRequestLimit(1);
  }

  private decrementRequests(): void {
    this.adjustRequestLimit(-1);
  }

  private adjustRequestLimit(value: number): void {
    this.requestLimit$.next(this.availableThreads += value);
  }
}

Answer 2

If you're looking for a different approach with Angular, check out this custom interceptor built for Angular 8 and RxJS 6:

@Injectable()
export class RateLimitInterceptor implements HttpInterceptor {

  private readonly timeInterval = 1000 /* 1 second interval */;

  private availableRequests = 10 /* 10 requests allowed per interval */;

  private requestLimit$ = new BehaviorSubject(this.availableRequests);

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return this.requestLimit$.pipe(
      filter(() => this.availableRequests > 0),
      take(1),
      tap(() => this.decrementRequests()),
      tap(() => timer(this.timeInterval).subscribe(() => this.incrementRequests())),
      mergeMap(() => next.handle(req))
    );
  }

  private incrementRequests(): void {
    this.adjustRequestLimit(1);
  }

  private decrementRequests(): void {
    this.adjustRequestLimit(-1);
  }

  private adjustRequestLimit(value: number): void {
    this.requestLimit$.next(this.availableThreads += value);
  }
}

Answer 3

Answer №2

If you want a way to monitor the frequency of your recent API calls, you could implement a system where each call consumes a token and these tokens are renewed every second. Below is an operator that can assist with this:

Observable.prototype.rateLimit = function (count: number, slidingWindowTime: number, scheduler = async) {
  let tokens = count;
  const tokenChanged = new BehaviorSubject(tokens);
  const consumeToken = () => tokenChanged.next(--tokens);
  const renewToken = () => tokenChanged.next(++tokens);
  const availableTokens = tokenChanged.filter(() => tokens > 0);

  return this.mergeMap(value =>
    availableTokens
    .take(1)
    .map(() => {
      consumeToken();
      Observable.timer(slidingWindowTime, scheduler).subscribe(renewToken);
      return value;
    }));
}

declare module 'rxjs/Observable' {
  interface Observable < T > {
    rateLimit(count: number, slidingWindowTime: number, scheduler ? : Scheduler): Observable < T >
  }
}

Answer 4

If you want a way to monitor the frequency of your recent API calls, you could implement a system where each call consumes a token and these tokens are renewed every second. Below is an operator that can assist with this:

Observable.prototype.rateLimit = function (count: number, slidingWindowTime: number, scheduler = async) {
  let tokens = count;
  const tokenChanged = new BehaviorSubject(tokens);
  const consumeToken = () => tokenChanged.next(--tokens);
  const renewToken = () => tokenChanged.next(++tokens);
  const availableTokens = tokenChanged.filter(() => tokens > 0);

  return this.mergeMap(value =>
    availableTokens
    .take(1)
    .map(() => {
      consumeToken();
      Observable.timer(slidingWindowTime, scheduler).subscribe(renewToken);
      return value;
    }));
}

declare module 'rxjs/Observable' {
  interface Observable < T > {
    rateLimit(count: number, slidingWindowTime: number, scheduler ? : Scheduler): Observable < T >
  }
}

Managing API call limits using RxJs

Answer №1

Answer №2

Similar questions

Mastering regular expressions in TypeScript

Tips for obtaining response headers

What goes on behind the curtain when moving between components in an Angular and Node.js single-page application (SPA)?

Count of items in filtered data displayed using Angular 5 *ngFor

Issue with Angular 8: Undefined value for ngModuleType.ngModuleDef.id when trying to import NguCarousel module

Encountering an issue with resolving parameters for the DecimalPipe in ngBootstrap/Angular2

How to change Input settings in Angular 6?

Is there a way to merge TypeScript code with C++ during compilation?

Adding the project license to the build in an Angular CLI project for xRay license scanning: A step-by-step guide

The best location for storing Typescript files within an ASP.NET Core project

Navigating Angular: Uncover the Secrets of Unwrapping Json Data

What techniques can I use to modify an object while it's being iterated through?

After the introduction of ReactiveFormsModule, the functionality of the Angular router has ceased

Angular resolver does not return anything if the outcome is an observable generated using the .asObservable() method

flickering effect problem

What is the process for removing a particular file from my bundle?

Bringing @angular/code into a directory that is not within an Angular project

Utilizing the return value of a MockService in a Jasmine unit test results in test failure

React - Incorrect use of hooks and class components

django-cors-headers failed to function properly on Django version 1.6.11