Question 60938 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to do things after an observable gets its data in Angular – Javascript

I am using an observable to retrieve data from an http like:

handleError(error:any) {
...
}
getData() {
   return this._api_service.http.get<JSON>(this._url).pipe(retry(1), catchError(this.handleError));
}
loadData() {
    this.getData().subscribe((data: {}) => {
        do_something_to_data(data);
    });
    // here I want to do somethings after all the data are loaded
    do_other_work();
    // what should I do here?
}

It seems do_other_work will get called before do_something_to_data is called. What should I change?

I tried next, pipe, but seems not working or observable does not support next().

Tags:

3

Answers


  1. 0

    Do_other_work happens first, because it is called outside of the scope of the subscribe.

    You can call

    do_something_to_data(data);
    Login or Signup to reply.
  2. 0

    The reason that do_other_work() is called before do_something_to_data() is because Observable are asynchronous by nature.
    To make sure that do_other_work() is called after the data is loaded and processed, you should call it inside the subscribe() method, after the do_something_to_data() call.

    Placing do_other_work() inside the subscribe() method, will ensure that it is called after do_something_to_data() has been executed, and the data is fully loaded/processed.

    loadData() {
    this.getData().subscribe((data: {}) => {
        // Pass the data to the do_something_to_data() function
        do_something_to_data(data);
        do_other_work();
    });
}

    And like Austin said, You could also pass the data as an argument to do_something_to_data() function, assuming that the function accepts the data as an input parameter.

    Login or Signup to reply.
  3. 0

    In Angular, a subscribe is asynchronous, which means that the code inside the subscribe block is not executed immediately. Instead, it is placed in the event loop and will be executed after the current synchronous code has finished running.

    Due to this asynchronous nature, any code written below the subscribe block may execute before the code inside the subscribe block. This is because the event loop prioritizes executing synchronous code before moving on to the queued asynchronous tasks.

    Then you need put do_other_work inside of the subscribe. Just like this:

    loadData() {
   this.getData().subscribe((data: {}) => {
      do_something_to_data();
      do_other_work();
   })
}

    Now, if what you want to do is ensure that do_other_work() is executed after do_something_to_data(), you can achieve this using a Promise. Or you can do the following:

    loadData() {
   this.getData().subscribe({
       next: (value) => {
           do_something_to_data();
       },
       error: (err) => {
          console.error('Error:', err);
       },
       complete: () => {
          do_other_work();
       },

   })
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search