异步函数同步工作

Question

我试图在鼠标点击事件上打开一个弹出窗口，但是弹出窗口只有在收到

GetClosetsSites()

函数的响应后才会出现，这需要几秒钟。

如何更改以下代码使弹出窗口立即打开？

功能：

async openInfo(e: any, x: any, y: any) {
    try {
        const closestArchPromise = this.siteservice.GetClosetsSites(e.wgS84_Info.geography);
        const siteIdPromise = this.siteservice.GetSiteId(e.resourceID).toPromise();
        const [closestArch, siteId] = await Promise.all([closestArchPromise, siteIdPromise]);
        this.dialog.closeAll();
        this.dialog.open(InformationComponent, {
            data: { arch: siteId, closestArch: closestArch, lang: this.browserLang },
            panelClass: 'custom-dialog-container'
        });
    } catch (error) {
        console.log(error);
    }
}

后端请求：

async GetClosetsSites(wgS84_Info: geography) {
    try {
        const response = await this.http.get<Site[]>(this.baseUrl + 'Site/GetclosestSites?KnownText=' + wgS84_Info.KnownText + '&SystemId=' + wgS84_Info.SystemId).toPromise();
        return response;
    } catch (err) {
        console.log(err);
    }
}

Answer 1

这里的问题是您正在使用

Promise.all

等待

GetClosetsSites

承诺在打开对话框之前完成。这将是一个挑战，因为在你的对话框中打开调用你然后使用你从函数中获得的

closestArch

来替换。这意味着您的

this.dialog.open

依赖于后端请求。

解决此问题的一种方法是使用默认值

closestArch

和 当您从服务器取回数据时更新它.

一个最小的例子看起来像这样：

async openInfo(e: any, x: any, y: any) {
    try {
        const siteId = await this.siteservice.GetSiteId(e.resourceID).toPromise();
        this.dialog.closeAll();

        const dialogRef = this.dialog.open(InformationComponent, {
            data: { arch: siteId, closestArch: [], lang: this.browserLang },
            panelClass: 'custom-dialog-container'
        });
        const closestArch = await this.siteservice.GetClosetsSites(e.wgS84_Info.geography);
        dialogRef.componentInstance.data.closestArch = closestArch;  
    } catch (error) {
        console.log(error);
    }
}

您的对话框在获取默认数据的情况下仍然需要合理地行动，因为当真实数据仍在从服务器获取时将显示该数据。