Отклонение и обещание в angularjs не работает должным образом

Question

У меня проблема с defer promise в angularjs.

Вот мой код:

var defer = $q.defer(); 

    defer.promise 
    //First Execution 
    .then(function() { 
     TestService.GetSchoolYear().then(function (results) { 
      $scope.schoolYears = results.data; 
      $scope.schoolYear = results.data[0].schlYearName; 
     }); 
    }) 
    //Second Execution 
    .then(function() { 
     TestService.GetAffiliation().then(function (results) { 
      $scope.affiliation = results.data; 
      $scope.school = results.data[0].affiliation; 
     }); 
    }) 
    //Third Execution 
    .then(function() { 
     TestService.GetDepartment().then(function (results) { 
      $scope.departments = results.data; 
      $scope.department = results.data[0].depName; 
      $scope.depCode = results.data[0].depCode; 
     }); 
    }) 
    //Fourth Execution 
    .then(function() { 
     TestService.GetYearLevel2($scope.depCode).then(function (results) { 
      $scope.yearLevels2 = results.data; 
      $scope.yearLevel2 = results.data[0].yearName; 
     }); 
    }); 
    defer.resolve(); 

Все исполнение в порядке. Но отсрочка выполняет в разных функциях не по порядку.

Что случилось с моим кодом? Есть ли какие-либо проблемы с ним.

Я получил эту ссылку здесь: https://thinkster.io/egghead/promises/

ли я что-то с моим кодом отсутствует. Все, что я хочу, - это выполнить функцию по порядку, потому что в другой функции есть некоторые данные.

спасибо.

Answer 1

Поскольку различные функции TestService, кажется, возвращает обещание, вам даже не нужно $q.defer здесь - на самом деле это было бы deferred anti-pattern.

Просто приковать их вместе и return результат:

return TestService.GetSchoolYear() 
    .then(function (results) { 
     $scope.schoolYears = results.data; 
     $scope.schoolYear = results.data[0].schlYearName; 

     return TestService.GetAffiliation(); 
    }) 
    .then(function (results) { 
     $scope.affiliation = results.data; 
     $scope.school = results.data[0].affiliation; 

     return TestService.GetDepartment(); 
    }) 
    .then(function (results) { 
     $scope.departments = results.data; 
     $scope.department = results.data[0].depName; 
     $scope.depCode = results.data[0].depCode; 

     return TestService.GetYearLevel2($scope.depCode); 
    }) 
    .then(function (results) { 
     $scope.yearLevels2 = results.data; 
     $scope.yearLevel2 = results.data[0].yearName; 
     return results; 
    }); 

Answer 2

Вы ничего не возвращаете в своих обработчиках then, поэтому обещания, созданные методами then(), решаются немедленно и сразу перейдут на следующий then().

Вы должны вернуть обещание, так что есть что-то ждать:

.then(function() { 
    // v-------- here 
    return TestService.GetSchoolYear().then(function (results) { 
     $scope.schoolYears = results.data; 
     $scope.schoolYear = results.data[0].schlYearName; 
    }); 
}) 

Следует также отметить, что нет необходимости использовать $q.defer() здесь (там почти никогда не является причиной для использования $q.defer()

.

Вы можете просто использовать $q.when():

$q.when() 
.then(function() { 
    // .... 
}) 

Или еще лучше, просто начать свое обещание цепи с первый асинхронной вызов вы делаете:

TestService.GetSchoolYear().then(function (results) { 
    $scope.schoolYears = results.data; 
    $scope.schoolYear = results.data[0].schlYearName; 
}) 
.then(function() { 
    return TestService.GetAffiliation().then(function (results) { 
     // ... 
    }); 
}) // ... 

Answer 3

Для обещания СЦЕПЛЕНИЯ работать функцию then должны возвращать что-то.

Попробуйте это:

defer.promise 
    //First Execution 
    .then(function() { 
     return TestService.GetSchoolYear().then(function (results) { 
       $scope.schoolYears = results.data; 
       $scope.schoolYear = results.data[0].schlYearName; 
       return results; 
     }); 
    }) 
    //Second Execution 
    .then(function() { 
     return TestService.GetAffiliation().then(function (results) { 
      $scope.affiliation = results.data; 
      $scope.school = results.data[0].affiliation; 
      return results; 
     }); 
    }) 
    //Third Execution 
    .then(function() { 
     return TestService.GetDepartment().then(function (results) { 
       $scope.departments = results.data; 
       $scope.department = results.data[0].depName; 
       $scope.depCode = results.data[0].depCode; 
       return result; 
     }); 
    }) 
    //Fourth Execution 
    .then(function() { 
     return TestService.GetYearLevel2($scope.depCode).then(function (results) { 
      $scope.yearLevels2 = results.data; 
      $scope.yearLevel2 = results.data[0].yearName; 
      return results; 
     }); 
    }); 
    defer.resolve();