TypeScript и Angular, порядок выполнения в этом

Question

У меня есть следующий код внутри приложения Angular, HTML выглядит так.

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

То, что onSubstringSelect находится в части .ts компонента:

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;
}

Я ожидал, что сначала у меня будет alert("1st alert");, а затем alert("2nd alert " + dataPois);, но сначала выполняется это предупреждение. Почему?

Answer 1

Это потому, что потоки Rx являются асинхронными.Когда вы настраиваете ваш поток, он действительно настраивает его;но ничего не бежит, пока что-то не слушает.В мире Rx это называется subscribing.

Когда вы передаете свой поток на AsyncPipe, используя stream$ | async;он подпишется, и все функции в потоке установки начнут функционировать по порядку.

Поначалу это кажется нелогичным, но на самом деле это имеет большой смысл.Если вы хотите, чтобы ваш console.log работал в том порядке, в котором вы хотите, добавьте tap() operators, чтобы переопределить ваш поток в соответствии с вашими ожиданиями.

Когда вы сделаете это:

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$
}

Вы можете видеть, как поток будет оставаться на прежнем уровне, пока кто-то не начнет слушать его, subscribing.

Answer 2

Вы не знаете, когда будут возвращены асинхронные данные. В этом случае ответ приходит после выполнения alert("2nd alert " + dataPois);.