Managing individual HTTP responses within Angular 6

Question

Managing individual HTTP responses within Angular 6

I currently have 15 HTTP requests being sent to the API individually. Instead of waiting for all requests to finish processing (especially one that can take a few minutes), I want to handle responses as they come in.

On the service side:

    findOneByOne(): Observable<any> {
    const calls = this.getCardsPath().map(el => this.getPromises(el));
    return Observable.forkJoin(calls)
        .map(res => {
            const tab = [];
            for (let i = 0; i < res.length; i++) {
                tab.push(this.checkInfoService(res[i].json()));
            }
            return tab;
        });
}


getPromises(str: String): Promise<any> {
    return this.requester.obtain({
        restUrl: "/administration/" + str,
        method: RequestMethod.Get
    })
        .toPromise()
        .then(res => res)
        .catch(err => err);
}

On the component side:

    displayDashboardInfoService() {
    if (this.featuresFlag.getCurrentVersion() !== "1.08" && this.featuresFlag.getCurrentVersion() !== "-1") {
        this.busy = this.dashboardInfoService.findAll()
            .then((res: DashboardInfo[]) => this.findPaths(res))
            .then((res: DashboardInfo[]) => this.loadItems(res))
            .catch((err: any) => {
                if (environment.debugLevel >= 3) console.error(err);
            });
    }
    else {

        this.dashboardInfoService.findOneByOne()
            .subscribe((res) => {
                const tab = [];
                for (let i = 0; i < res.length; i++) {
                    tab.push(res[i][0]);
                }
                this.findPaths(tab);
                this.loadItems(tab);
            });
    }

}

Thank you :)

javascript angular typescript http rxjs

Answer 1

Answer №1

If you want to receive an event after each request is complete instead of waiting for all requests to finish, one solution is to replace the forkJoin with merge.

For example, consider this code snippet:

waitForAll() {
  this.values = [];
  this.loadAllAtOnce([100, 200, 300, 400, 3000])
    .subscribe(values => {
      this.values = values;
    });
}

loadAllAtOnce(values: number[]) {
  return forkJoin(
    values.map(x => of (x).pipe(delay(x)))
  ).pipe(
    tap(values => {
      console.log(values);
    })
  );
}

You can rewrite it like this:

asTheyCome() {
  this.values = [];
  this.loadAsSoonAsAvailable([100, 200, 300, 400, 3000])
    .subscribe(value => {
      this.values.push(value);
    });
}

loadAsSoonAsAvailable(values: number[]) {
  return merge(
    ...values.map(x => of (x).pipe(delay(x)))
  ).pipe(
    tap(value => console.log(value))
  );
}

Check out a live demonstration here.

Answer 2

If you want to receive an event after each request is complete instead of waiting for all requests to finish, one solution is to replace the forkJoin with merge.

For example, consider this code snippet:

waitForAll() {
  this.values = [];
  this.loadAllAtOnce([100, 200, 300, 400, 3000])
    .subscribe(values => {
      this.values = values;
    });
}

loadAllAtOnce(values: number[]) {
  return forkJoin(
    values.map(x => of (x).pipe(delay(x)))
  ).pipe(
    tap(values => {
      console.log(values);
    })
  );
}

You can rewrite it like this:

asTheyCome() {
  this.values = [];
  this.loadAsSoonAsAvailable([100, 200, 300, 400, 3000])
    .subscribe(value => {
      this.values.push(value);
    });
}

loadAsSoonAsAvailable(values: number[]) {
  return merge(
    ...values.map(x => of (x).pipe(delay(x)))
  ).pipe(
    tap(value => console.log(value))
  );
}

Check out a live demonstration here.

Managing individual HTTP responses within Angular 6

Answer №1

Similar questions

What could be the reason for the function providing the value of just the initial input?

Creating a static Top Bar that remains unaffected by page refreshing using Ajax or any other method can be achieved by implementing JavaScript and CSS

What is the most effective way to choose and give focus to an input using JavaScript or jQuery?

Utilizing a callback function to update the value of a variable that is declared outside of the getJSON function

blur event triggered on a cell within a table

Executing a Javascript function post AJAX page loading

Error always appears when using addMethod in jQuery validator

Vue has issued a warning stating that the type check for the "eventKey" prop has failed. The expected type was a String or Number, but an Array was provided instead. Additionally, it is advised to

Conceal multiple divs at the same time based on their largest dimension

Troubleshooting typescript error in styled-components related to Material-UI component

Ways to boost performance in an Angular 6.0 application

Issues with finding your way

Presenting two arrays simultaneously creates angular duplicates

Utilizing Sails.js: Invoking a YouTube service through a controller

The module './product' could not be located, resulting in error TS2307

How can I retrieve the OptionID value upon click?

Is it possible to execute TypeScript class methods in asynchronous mode without causing the main thread to be blocked?

Navigating with Buttons using React Router

Acquiring JSON data from Node.js within Angular

How to append a JSON object to an existing .json file