Javascript 使用承诺处理页面加载

我有一个处理页面加载的变量，该变量为true或false。如果所有数据都已准备就绪，则会隐藏一个加载图标，并显示页面的其余部分，然后“加载”变量为“false”

我在

Promise.all（）

中运行多个函数从数据库检索数据，以确保所有数据都已准备就绪

但是，在变量更改和页面更改之间存在时间延迟。即使所有数据都已准备就绪且“加载”变量为“false”，显示页面的其余部分也需要大约10秒

$scope.load = true;

function getData1(){
     return new Promise((resolve, reject) => {
         //this is http call from Customer Service
         Customer.getCustomers().then(function(data){   
             if (data.data.success) {
                $scope.customers = data.data.customers; 
                resolve(true);          
             } else {
                 reject(false);
             }
        })
     })
}
function getData2(){
     return new Promise((resolve, reject) => {
         //this is http call from Event Service
         Event.getEvents().then(function(data){   
             if (data.data.success) {
                 $scope.events = data.data.events; 
                 resolve(true);         
             } else {
               reject(false);
             }
         })
     })
}
.
.
.
Promise.all([getData1(), getData2(), getData3()])
    .then(results=>{
        $scope.load = false;            
})

如果我在每个函数中放置

$scope.load=false

，则可以解决此问题，但在所有函数中放置

$scope.load=false

而不是只将其放置在

Promise.all（）

中一次是没有意义的

 function getData1(){
     return new Promise((resolve, reject) => {
         //this is http call from Customer Service
         Customer.getCustomers().then(function(data){   
             if (data.data.success) {
                $scope.customers = data.data.customers;
                $scope.load = false;
                resolve(true);          
             } else {
                 reject(false);
             }
        })
     })
}

有人能解释为什么在这种情况下会出现时滞吗

---

我在函数中没有看到需要10秒才能完成的任何循环或任何内容。当我将

console.log（结果[0]）console.log（结果[1]）console.log（结果[2]）

放在

Promise.all（）中时，它立即显示承诺已得到解决

我在函数中没有看到需要10秒才能完成的任何循环或任何内容。当我将
console.log（结果[0]）console.log（结果[1]）console.log（结果[2]）
放在
Promise.all（）中时，它立即显示承诺已得到解决

Promise.all（）
创建的ES6承诺未与AngularJS框架执行上下文集成。只有在AngularJS执行上下文中应用的操作才会受益于AngularJS数据绑定、异常处理、属性监视等

改用
$q.all
：

̶P̶r̶o̶m̶i̶s̶e̶.̶a̶l̶l̶(̶[̶g̶e̶t̶D̶a̶t̶a̶1̶(̶)̶,̶ ̶g̶e̶t̶D̶a̶t̶a̶2̶(̶)̶,̶ ̶g̶e̶t̶D̶a̶t̶a̶3̶(̶)̶]̶)̶
$q.all([getData1(), getData2(), getData3()])
    .then(results=>{
        $scope.load = false;            
})

还应避免使用ES6 promise构造函数：

function getData1(){
    ̶r̶e̶t̶u̶r̶n̶ ̶n̶e̶w̶ ̶P̶r̶o̶m̶i̶s̶e̶(̶(̶r̶e̶s̶o̶l̶v̶e̶,̶ ̶r̶e̶j̶e̶c̶t̶)̶ ̶=̶>̶ ̶{̶
    //this is http call from Customer Service
    return Customer.getCustomers().then(function(response){   
        if (response.data.success) {
            $scope.customers = response.data.customers; 
            return $scope.customers;          
        } else {
            throw "getCustomers failed";
        }
    })
}

getCustomers（）
函数已经返回了一个承诺，因此不需要构造一个不与AngularJS执行上下文及其摘要周期集成的ES6承诺。
当
getData1（）
立即无条件地调用自身时，这如何工作？你确定这是你的代码吗？
getData1（）
的最终版本没有此递归调用。我想第一个是错的吧？或者，你在哪里完成数据库工作？@trincot抱歉，这是我的错，我是指来自服务的http调用，所以我更改了部分。Customer.getCustomers（）和Event.getEvents（）为DB执行此项工作，如果它们都成功，我希望停止加载并显示页面的其余部分。控制台中有错误吗？没有，没有错误是的，它正在使用$q.all！！！非常感谢你。你让我开心。