JS, React: Api requests queue

I’ve implemented a queue of api requests:

class QueueStore {
  private _requests: AxiosRequestConfig[] = [];

  private _loadingState = new LoadingStateStore();

  enqueue = (req: AxiosRequestConfig) => {
    this._requests = [...this._requests, req];
  };

  addEvent = (req: AxiosRequestConfig) => {
    this.enqueue(req);
  };

  processEvents = (() => {
    let isReady = true;

    return async () => {
      if (isReady && this._requests.length > 0) {
        this._loadingState.setLoading(true);

        const response = this.dequeue();

        isReady = false;
        this.retryApiCalls(response as AxiosRequestConfig);

        isReady = true;
        this.processEvents();
      }
    };
  })();

  private retryApiCalls = async (req: AxiosRequestConfig) => {
    try {
      await HttpService.request(req);
    } catch (error) {
      ToastService.onDanger(
        ExceptionsService.errorResolver(error as ServerError)
      );
    } finally {
      this._loadingState.setLoading(false);
    }
  };

  dequeue = () => {
    return this._requests.shift();
  };

  length = () => {
    this._requests.length;
  };

  get isSyncing() {
    return this._loadingState.loading;
  }

  get requests() {
    return toJS(this._requests);
  }
}

Problem: processEvents fires API calls one by one, even if they are failing. As a result, the queue is empty.

Goal:

  • processEvents should be stopped if one of the API calls has
  • only successful requests should be dequeud. Failing requests should be left in the queue

How can I modify the existing solution?