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

你不知道什么时候会返回异步数据。在这种情况下，答案是在执行alert("2nd alert " + dataPois); 之后。

Answer 2

这是因为 Rx 流是异步的。当您设置流时，它确实设置了它；但是直到有东西在听这个之前什么都没有运行。在 Rx 世界中，这称为subscribing。

当您使用stream$ | async 将您的信息流移交给AsyncPipe 时；它将订阅并且设置流中的所有功能将按顺序开始运行。

起初这似乎违反直觉，但实际上很有意义。如果您希望 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 开始收听它。