检查是否完成了所有异步http请求

Question

所以我的纯JS应用程序中有多个异步HTTP请求，但当它们加载时，会阻碍应用程序的有效工作。我想为此显示一个加载指示符，我不知道如何使用异步请求。

我尝试了什么。我检查了我在一个数组中触发了多少请求，而这些请求没有完成，我显示了一个加载指示符，但因为这些请求在第一个集合完成后是异步的，所以出现了另一个集合，因为它们之间存在依赖关系。

有什么办法可以解决这个问题吗？

Answer 1

让我们假设您有这样的代码：

function doAjax(params, callback) {
// ...
callback(ajaxResponse, error);
}
function doRequests() {
doAjax(params, (success, error) => {
if(error) console.error(error);
console.log(success);
});
doAjax(params2, (success, error) => /* ... */);
// ...
}

你可以很容易地将其改写为承诺：

function doAjax(params) {
return new Promise((resolve, reject) => {
// ...
if(error) reject(error);
else resolve(ajaxResponse;
});
}
function doRequests() {
showLoader();
Promise.all(doAjax(params), doAjax(params2), /* ... */)
.then((results) => {
console.log(results);
hideLoader();
})
.catch(error => {
console.error(error);
hideLoader();
});
}