链接.then() - 调用:无法识别拒绝

时间:2015-05-04 23:11:57

标签: angularjs promise angular-promise

我很难理解承诺的概念(在angularjs中)。

我认为我可以定义一个返回promise的函数。这个承诺的消费者可以使用它,也可能返回一些数据或承诺。

但是这个简单的例子表现出意外:第一个.then()调用返回拒绝,但第二个then()调用执行成功函数。

angular.module('myexample', []).controller('Ctrl', ['$scope', '$q',
  function($scope, $q) {
    $scope.sdfsdf = "";
    $scope.action = function() {
      $('#msg').html("");
      $.Deferred().resolve()
        .then(function(response) {
          $('#msg').html("error during processing of data!");
          return $q.reject('my-failure-reason');
        })
        .then(
          function(data) {
            $('#msg').html($('#msg').html() + "<br>success: " + data);
          },
          function(data) {
            $('#msg').html($('#msg').html() + "<br>failure: " + data);
          }
        );
    };
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body ng-app="myexample">
  <div ng-controller="Ctrl">
    <button ng-click="action()">Go!</button>
    <div id="msg"></div>
  </div>
</body>

我看了一下类似的问题,但是我找不到我的方法和接受答案中的方法之间的区别(e.x. this one

1 个答案:

答案 0 :(得分:2)

这是因为您使用$.Deferred().resolve()启动链,这是一个jQuery承诺。 jQuery promise不符合Promises / A +标准(还是!),因此不能正确处理错误。有关详细信息,请参阅this question and answer

简单的解决方案就是不要将代码包装在延迟的jQuery中。如果您想要一个空的已解决的承诺,您可以改为使用Angular $q.when()

&#13;
&#13;
angular.module('myexample', []).controller('Ctrl', ['$scope', '$q',
  function($scope, $q) {
    $scope.sdfsdf = "";
    $scope.action = function() {
      $('#msg').html("");
      $q.when() // not jQuery
        .then(function(response) {
          $('#msg').html("error during processing of data!");
          return $q.reject('my-failure-reason');
        })
        .then(
          function(data) {
            $('#msg').html($('#msg').html() + "<br>success: " + data);
          },
          function(data) {
            $('#msg').html($('#msg').html() + "<br>failure: " + data);
          }
        );
    };
  }
]);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body ng-app="myexample">
  <div ng-controller="Ctrl">
    <button ng-click="action()">Go!</button>
    <div id="msg"></div>
  </div>
</body>
&#13;
&#13;
&#13;