How to queue http get/post requests in Angular 2+?

Question

Angular

I have for example 25 different post or get.... How can I make sure that the 2nd request does not start until 1 completes... 1 completes starts 2. until the 2nd request completes do not start the 3rd one, etc. I have to make this condition. Firstly, because of the refresh of the token ... And secondly, the logic suggests this. Below I threw off the http template error template and the get / post example, I still have 40 such pieces, so the template function is definitely needed ...

devicesTypes = new Subject<any>();
  usersAccountList = new Subject<any>();
  userDevice = new Subject<any>();
  userDeviceNotification = new Subject<any>();
  allCategories = new Subject<any>();

// и т.д.....

  httpGetTemplate(param_url?, target?) {
    const httpHandler = () => {
      const $params = param_url;
      const $target = target;
      const options = {
        headers: new HttpHeaders().set('Authorization', 'Bearer ' + localStorage.getItem('token'))
      };
      return this.http.get(this.apiURL + $params, options).subscribe((_data: any) => {
        // console.log('new http :', _data);
        $target.next(_data.result);
      }, _error => {
        // console.log('new _error :', _error);
        this.errorsHandler(_error, httpHandler);
      });
    };
    httpHandler();
  }

  errorsHandler(_err, _httpHandler) {
    if (_err.status === 401) {
      const optionsSimple = {
        headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
      };

      const refresh = new URLSearchParams();
      refresh.set('refresh_token', localStorage.getItem('refresh_token'));
      this.http.post('http://185.156.41.135/api/web/v1/users/refresh-token', refresh.toString(), optionsSimple).subscribe((data: any) => {
        localStorage.setItem('token', data.result.auth_token);
        localStorage.setItem('refresh_token', data.result.refresh_token);
        _httpHandler();

      }, __err => {
        if (__err.status === 400) {
          localStorage.removeItem('token');
          localStorage.removeItem('refresh_token');
          this.router.navigate(['/login']);
        }
      });
    } else if (_err.status === 400) {
      // localStorage.removeItem('token');
      // localStorage.removeItem('refresh_token');
      // this.router.navigate(['/login']);
    }
  }

  getleftWidgetCategories() {
    return this.httpGetTemplate('/device-info/devices', this.allCategories);
  }

  getDevicesTypes() {
    return this.httpGetTemplate('/devices/get-device-models', this.devicesTypes);
  }


  getUsersAccountList() {
    return this.httpGetTemplate('/users/list', this.usersAccountList);
  }

  getUserDevice() {
    return this.httpGetTemplate('/devices/get-device-user', this.userDevice);
  }

  getUserDeviceNotification(id) {
    return this.httpGetTemplate('/devices/settings-event?id=' + id, this.userDeviceNotification);
  }

  getDeviceUserAcccess(user_id, device_id) {
    return this.httpGetTemplate('/devices/get-device-user-acccess?user_id=' + user_id + '&device_id=' + device_id, this.deviceUserAcccess);
  }

Answer 1

How do I make it so that the 2nd request does not start until 1 completes ... 1 completes begins 2. until the 2nd request completes do not start the 3rd, etc.

switchMap
or concatMap
depends on the specifics of your task