Обработка загрузки страницы с обещаниями

Question

У меня есть переменная, обрабатывающая загрузку страницы с true или false. Если все данные готовы, значок загрузки скрыт, а остальная часть страницы отображается, тогда «загрузка» переменной - «false».

Я запускаю несколько функций для извлечения данных из базы данных в Promise.all() чтобы убедиться, что все данные готовы.

Однако между изменением переменной и изменением страницы существует временная задержка. Отображение остальной части страницы занимает около 10 секунд, даже если все данные готовы и переменная «loading» имеет значение «false».

$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(results[0]) console.log(results[1]) console.log(results[2]) внутрь Promise.all(), это сразу показывает, что обещания выполнены.

Answer 1

Я не вижу никаких петель или чего-либо в функциях, для прохождения которых требуется 10 секунд. Когда я помещаю console.log(results[0]) console.log(results[1]) console.log(results[2]) внутри Promise.all(), это сразу показывает, что обещания разрешены.

Обещания ES6, созданные Promise.all(), не интегрированы с контекстом выполнения платформы 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:

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() уже возвращает обещание, поэтому нет необходимости создавать обещание ES6, которое не интегрировано с контекстом выполнения AngularJS и его циклом дайджеста.