$http 承诺链运行顺序错误

Question

我是 angularjs 的新手。我的目标很简单。我想进行 ajax 调用以获取数据，完成后，我想进行第二次调用以获取依赖于第一组信息的另一组数据。

我正在尝试利用 promise 机制来做到这一点，这样我就可以利用链接而不是嵌套 ajax 调用，并更好地保留拥有独立功能的能力，我可以根据需要将它们结合在一起。

我的代码类似于以下内容：

var promiseGetWorkTypes = function ($q, $scope, $http) {
 console.log("promiseGetWorkTypes");

 return $q(function (resolve, reject) {
  $http({
   method: 'GET',
   url: '/WorkTypes'
  }).then(
   function (payload) {
    console.log("Got workttypegroups")
    console.log(payload);

    $scope.WorkTypeGroups = payload.data;

    console.log("End of worktypegroups");
    resolve(payload);
   },
   function (payload) {
    reject(payload);
   });
 });
};

var promiseGetRecentActivities = function ($q, $scope, $http) {
 console.log("promiseGetRecentActivities");

 return $q(function (resolve, reject) {
  $http({
   method: 'GET',
   url: '/RecentHistory'
  }).then(
   function (payload) {
    $scope.RecentActivities = payload.data;

    resolve(payload);
   },
   // data contains the response
   // status is the HTTP status
   // headers is the header getter function
   // config is the object that was used to create the HTTP request
   function (payload) {
    reject(payload);
   });
 });
};

var index = angular.module("index", []);

index
.controller('EntitiesController', function ($scope, $http, $timeout, $q) {
 promiseGetWorkTypes($q, $http, $scope)
  .then(promiseGetRecentActivities($q, $http, $scope));
}

但是，当我查看我的调试控制台时，我发现对 "promiseGetRecentActivities" 的调用在 "promiseGetWorkTypes".[=12 的 Ajax 处理调用发生之前开始=]

我在这里遗漏了什么或做错了什么？

Answer 1

写的时候

promiseGetWorkTypes($q, $http, $scope).then(promiseGetRecentActivities($q, $http, $scope));

在评估此行时调用 promiseGetActivites。您应该能够将对 promiseGetActivities 的调用包装在另一个函数中以延迟调用，直到第一个 promise 已解决以按顺序获得对运行的调用：

promiseGetWorkTypes($q, $http, $scope).then(function() {
  promiseGetRecentActivities($q, $http, $scope);
});

原因与 then 内部发生的事情无关，而是由于 Javascript 语法。以下：

myFunc1(myFunc2());

将调用 myFunc2() 的结果传递给 myFunc1，并且 而不是 对 myFunc2 函数的引用.所以从逻辑上讲，myFunc2 必须在 myFunc1 之前运行。如果你写

myFunc1(myFunc2);

然后 myFunc1 将收到对 myFunc2 的引用，因此 myFunc1 会在 myFunc2 之前运行（事实上，myFunc2 只会运行如果在 myFunc1 的某处有调用它的代码）。

定义函数 inline/anonymously 不会改变此行为。要将匿名函数的结果传递给另一个函数，您可以执行以下操作

myFunc1((function() {
  return 'something';
})());

将首先评估匿名函数，因为它的 return 值，'something' 将传递给 myFunc1。要传递对匿名函数的引用，您可以执行以下操作：

myFunc1(function() {
  return 'something';
});

然后它将取决于 myFunc1 它是否会调用传递给它的函数。

回到你的问题，你的代码：

promiseGetWorkTypes($q, $http, $scope).then(promiseGetRecentActivities($q, $http, $scope));

正在将promiseGetRecentActivities($q, $http, $scope)的结果传递给then，所以它必须在then是运行之前运行，所以肯定不会等待promiseGetWorkTypes 的承诺得到解决。你似乎想要的是传递一个函数，当调用时，运行s promiseGetRecentActivities($q, $http, $scope)，这就是

promiseGetWorkTypes($q, $http, $scope).then(function() {
  promiseGetRecentActivities($q, $http, $scope);
});

会。

作为旁注，将 $q、$http 等传递给各种函数似乎有点 unusual/overcomplicated，但我认为可能超出了这个问题的范围通过备选方案。

$http 承诺链运行顺序错误

$http promise chain running in wrong order

javascript

ajax

promise

angularjs

angular-promise

$http 承诺链 运行 顺序错误

$http promise chain running in wrong order

javascript

ajax

promise

angularjs

angular-promise

$http 承诺链运行顺序错误