$timeout 包装 $http.post return undefined 而不是 promise

Question

我正在尝试提交一个要求用户电子邮件不重复的表单，但我想在 POST 请求之前制作一个小动画。在 $scope.process 函数中我得到：

TypeError: Cannot read property 'catch' of undefined.

发生这种情况是因为 $scope.process 在 $http.post 完成之前 returning，但是我怎样才能使 process() return 成为 promise 而不是 undefined？

所以，这就是我目前所拥有的：

//The submit form function
$scope.submitForm = function () {

  $('.btn').attr('disable');

  if ($scope.form.$valid) {

    $scope.process($scope.account)
    .catch(function (err) {

      if (err.code === 'duplicate') {
        // handle error
      }

    });

    return false;
  }
};

//This is the one in charge to send the request
$scope.process = function(body) {

  // Timeout before http post to wait for animation
  $timeout(function() {

    return $http.post(postUrl, body).then(function (response) {
      // This return a promise if I remove the $timeout
      var nextPage = response.data;
    }).catch(function (err) {
      throw err;
    });
  }, 300);

  // Return undefined due to $timeout
};

提前致谢。

Answer 1

你得到了 TypeError: Cannot read property 'catch' of undefined，因为你根本没有 returnprocess 函数的承诺。从 process 函数执行 return $timeout 承诺并在 $timeout 承诺对象上应用 .then & .catch。

通过 returning $timeout 服务，内部 $http.post 将 return 一个数据，从而形成适当的链接机制。

代码

$scope.process = function(body) {
  // returned promise from here
  return $timeout(function() {
    //returned $http promise from here.
    return $http.post(postUrl, body).then(function (response) {
      // This return a promise if I remove the $timeout
      nextPage = response.data;
      return nextPage; //return data from here will return data from promise.
    }).catch(function (err) {
      throw err;
    });
  }, 300);
};

$timeout 包装 $http.post return undefined 而不是 promise

$timeout wrapping $http.post return undefined instead of promise

javascript

timeout

promise

angularjs

angular-promise