Question

我想知道$ q如何工作在角度，让我说我有几行代码可以执行。

var app = angular.module('app', []);

app.controller('HelloCtrl', function ($q, $scope) {

    $scope.Title = "Promise Demo";

    function asyncGreetings(name) {

        var deferred = $q.defer();
        setTimeout(function() {

            deferred.notify('About to greet ' + name + '.');
            if (name == "binson") {
                deferred.resolve("Hello " + name);
            } else {
                deferred.reject("Greeting not allowed ");
            }

        }, 5000);

        return deferred.promise;
    };


    $scope.CurrentName = "";
    var promise = asyncGreetings('binson');

    promise.then(function(greeting) {
        $scope.CurrentName='Success: ' + greeting;
    }, function(reason) {
        $scope.CurrentName ='Failed: ' + reason;
    }, function (update) {

        $scope.Progress = 'Got notification: ' + update;
    });


 });

这是示例代码，这里是一个模拟异步函数asyncGreetings（）并将在5秒后执行，我想要显示进度（一个简单的警报框或任何事物），直到承诺收集给调用者，我想我使用3个参数（成功，失败，进度）正确配置调用程序功能。但进度处理程序不起作用..这里有什么问题，以及我如何解决这个问题。

Answer 1

进度处理程序不会自动更新。

您必须使用deferred.notify('message')以类似的方式提供更新，以解决/拒绝。

see plunker demo

在处理超时和间隔时，最好使用包含本机javascript函数的角度提供的$ timeout和$ interval服务。请务必将它们包含在您的提供商中。

而不是使用clearTimeout(timeout_instance)和clearInterval(interval_instance)使用$timeout.cancel(timeout_instance)或$interval.cancel(interval_instance)

Answer 2

你在相同的5秒超时内通知，所以它只会在5秒结束时触发

如果您在不同的间隔循环中设置通知，则进度回调正常

   for (i = 0; i < 5; i++) {
      (function(i) {
        setTimeout(function() {
          deferred.notify('Notification #' + (i + 1));
        }, i * 1000);
      })(i);
    }

    setTimeout(function() {
      if (name == "binson") {
        deferred.resolve("Hello " + name);
      } else {
        deferred.reject("Greeting not allowed ");
      }

    }, 5000);

的 DEMO

Answer 3

所有上述解决方案都非常好，以清除我对q的疑虑，这里我有一个非常好的解决方案与所有角度实用程序。我改变了我的异步函数，现在它使用$ interval

调用defer.notify（）

function asyncGreetings(name) {

        var deferred = $q.defer();
        var progress = 0;

        var interval = $interval(function() {

            if (progress >= 100) {
                $interval.cancel(interval);
            }
            progress += 10;

            deferred.notify(progress);
        },1000);
        $timeout(function() {

          //  deferred.notify('About to greet ' + name + '.');
            if (name == "binson") {
                deferred.resolve("Hello " + name);
            } else {
                deferred.reject("Greeting not allowed ");
            }

        }, 10000);

        return deferred.promise;
    };

我在我的控制器中添加了一个名为$ interval，$ timeout的参数（依赖注入）

app.controller('HelloCtrl', function ($q, $scope, $interval,$timeout) {///}

$ q如何在angularJs中起作用

3 个答案: