Question

我在Angular应用程序中有以下代码，html看起来像这样。

Siren.shared

@objc位于组件的.ts部分：

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

onSubstringSelect

我期望我先拥有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; }，但是该警报首先执行。为什么？

Answer 1

您不知道何时将返回异步数据。在这种情况下，答案是在执行alert("2nd alert " + dataPois);之后得出的。

Answer 2

这是因为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开始收听它为止。

TypeScript和Angular，执行顺序在此

2 个答案: