CODEWITHSUNDEEP
javascripttypescriptrxjs
pmiranda
pmiranda

Reputation: 8420

TypeScript and Angular, order of execution in this

I have the following code inside an Angular application, the html looks like so.

<ng-multiselect-dropdown
    (onSelect)="onSubstringSelect($event)">
</ng-multiselect-dropdown>

That onSubstringSelect is in the .ts part of the component:

onSubstringSelect(item: any) {
    const dataPois = this.getPois(data);
    alert("2nd alert " + dataPois);
    // etc
}

getPois(data): any[] {
    this.api.getPois(data).subscribe((result: any) => {
        alert("1st alert");
        return result.pois;
        }
    }, (error: any) => {
        console.error('error', error);
        return {};
    });

    return null;
}

I was expecing that I had first the alert("1st alert"); and then alert("2nd alert " + dataPois); but that alert is executing first. Why?

Upvotes: 7

Views: 1204

Answers (2)

Bjorn &#39;Bjeaurn&#39; S
Bjorn &#39;Bjeaurn&#39; S

Reputation: 3891

This is because Rx Streams are asynchronous. When you set up your stream, it does indeed set it up; but nothing runs until there's something listening to this. In the Rx world, this is called subscribing.

When you hand off your stream to the AsyncPipe using stream$ | async; it'll subscribe and all the functions within the setup stream will start functioning in order.

This seems counter intuitive at first, but it actually makes a lot of sense. If you want your console.log to run in the order you want them, add tap() operators in order or redefine your stream to match your expectation.

When you do this:

function A() {
    const stream$ = this.http.get('my-stream-url').pipe(
            tap(() => { console.log('stream is live!') })
        )
    console.log('But this will show up first, because nothing is listening to the stream$ yet!')
    return stream$
}

You can see how the stream will stay stagnant, until someone starts listening to it by subscribing.

Upvotes: 1

Kamil Augustyniak
Kamil Augustyniak

Reputation: 429

You do not know when the asynchronous data will be returned. In this case, the answer comes after doing alert("2nd alert " + dataPois);.

Upvotes: 1

Related Questions