Angular 让 HttpClient 等待

Question

所以在这里我将通过调用this.Reload.All() 来初始化我的数组，然后获取我需要的所有数组，以便稍后在程序中进行过滤。发生的情况是所有 4 个调用都发出 然后 4 个响应返回。这会混淆并破坏服务，因为它在回复他们的响应之前无法接听这么多电话。我正在寻找的是一个同步解决方案，它会做这样的事情：调用 1 - 响应 1 - 调用 2 - 响应 2 - 调用 3 - 响应 3 - 调用 4 - 响应 4。 reponse.dbX_response.view 就是这样我的 JSON 从服务器返回。

我的所有代码都正常工作，只是异步中断了我的调用。我该如何解决这个问题？

//Reload Reference Arrays
    RefVehicleTypes = [];
    RefClients = [];
    RefUsers = [];
    RefObjects = [];

//Reload Class:
    Reload = {
        DoCall : (pUrl, pArray, pResponse) => {
            this.HttpClient.get(pUrl).subscribe(
                (response: any) => {
                    this[pArray] = eval(pResponse);
                    console.log(pResponse + ' : ' + this[pArray]);
                }
            );   
        },
        All : () => {
            this.Reload.VehicleTypes();
            this.Reload.Clients();
            this.Reload.Users();
            this.Reload.Objects();
        },
        VehicleTypes : () => {
            this.Reload.DoCall(
                'http://...',
                'RefVehicleTypes',
                'response.dbVehicleType_response.view',
            );
        },
        Clients : () => {
            this.Reload.DoCall(
                'http://...',
                'RefClients',
                'response.dbClient_response.view',
            );
        },
        Users : () => {
            this.Reload.DoCall(
                'http://...',
                'RefUsers',
                'response.dbUser_response.view'
            );
        },
        Objects : () => {
            this.Reload.DoCall(
                'http://...',
                'RefObjects',
                'response.dbObject_response.view'
            );
        }
    }

新编辑：

所以我用这个替换了 DoCall 和 All 方法，但这仍然不起作用。查看下面的屏幕截图以了解结果。

DoCall : (pUrl, pArray, pResponse) => {
    return new Promise((resolve, reject) => {
        this.HttpClient.get(pUrl).subscribe(
            (response: any) => {
                console.log('##############################' + pArray)
                console.log(this[pArray]);
                this[pArray] = eval(pResponse);
                console.log(this[pArray]);
                resolve();
            }
        )
    });
},
All : async () => {
    await this.Reload.VehicleTypes();
    await this.Reload.Clients();
    await this.Reload.Users();
    await this.Reload.Objects();
},

这里是 3 次刷新的 3 张截图。如您所见，异步 All() 函数似乎导致数组混合在一起，这没关系。不知道为什么，但它仍然以某种方式延迟了响应。最后一个总是有效，这可能意味着之前的响应正在被下一个响应所取代？

Answer 1

所以，这只是写在这里，所以代码没有经过测试，但是这样的东西应该可以让你的调用同步。

Reload = {
    DoCall : (pUrl, pArray, pResponse) => {
        return new Promise((resolve, reject) => {
            this.HttpClient.get(pUrl).subscribe(
                (response: any) => {
                    this[pArray] = eval(pResponse);
                    console.log(pResponse + ' : ' + this[pArray]);

                    resolve();
                }
            );  
        }
    },
    All : () => {
        this.Reload.VehicleTypes().then(() => {
            return this.Reload.Clients();
        }).then(() => {
            return this.Reload.Users();
        }).then(() => {
            return this.Reload.Objects();
        }).then(() => {
            console.log("Everything reloaded");
        });
    },
    VehicleTypes : () => {
        return this.Reload.DoCall(
            'http://...',
            'RefVehicleTypes',
            'response.dbVehicleType_response.view',
        );
    },
    Clients : () => {
        return this.Reload.DoCall(
            'http://...',
            'RefClients',
            'response.dbClient_response.view',
        );
    },
    Users : () => {
        return this.Reload.DoCall(
            'http://...',
            'RefUsers',
            'response.dbUser_response.view'
        );
    },
    Objects : () => {
        return this.Reload.DoCall(
            'http://...',
            'RefObjects',
            'response.dbObject_response.view'
        );
    }
}

也可以在较新的 JS 版本中使用

All : async () => {
    await this.Reload.VehicleTypes();
    await this.Reload.Clients();
    await this.Reload.Users();
    await this.Reload.Objects();
},

仍然使用 Promise。