httpClient debugging order in subscription

Question

I've got the following TS-method. When I set the two breakpoints #1 and #2 it first hits #1 for all my objects and after that it hits #2 for all my problems.

In my opintion that should be in another order.

  public getBuild(val) {
    let j_jobs: any;
    for (const project of val.projects) {
      for (const job of project.jobs) {
        this.httpService.get(job.url + 'api/json',
          {
            headers: new HttpHeaders({
              'Content-Type': 'application/json',
              'Authorization': 'Basic TOKENREMOVED'
            })
          })
          .subscribe(
            data => {
              j_jobs = data; //#2
            }
          );
      }
    }
    console.log(j_jobs); // #1
  }```

Can anybody tell me, why angular works like that?

score 0 · Answer 1 · answered Feb 04 '19 at 13:40

That's asynchronous coding.

In Javascript, you only have a single thread.

When you use asynchronous coding, such as Promises, Observables and AJAX, you ask your application to make something, then do something while waiting for the process to finish, and once the process is finished, proceed with the callback.

This allows you to create non-blocking processes. Imagine if you had to wait for your HTTP call to finish, and they took 10 seconds each ... Not very user-friendly !

In this case, you use Observables from RxJS, and make HTTP calls. So, it's asynchronous !

httpClient debugging order in subscription

1 Answers1