码迷,mamicode.com
首页 > Web开发 > 详细

ANGULAR JS PROMISE使用

时间:2015-09-11 00:08:45      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:

Promise是一种模式,以同步操作的流程形式来操作异步事件,避免了层层嵌套,可以链式操作异步事件。

我们知道,在编写javascript异步代码时,callback是最最简单的机制,可是用这种机制的话必须牺牲控制流、异常处理和函数语义化为代价,甚至会让我们掉进出现callback大坑,而promise解决了这个问题。

 

下面实例是angularjs 的promise的实现方式:

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="assets/angular.min.js"></script>
</head>
<body ng-controller="ctrl">

<script type="text/javascript">

var  app = angular.module("app",[]);
app.controller(ctrl, [$scope,$q,function($scope,$q){
    
    function okToGreet(name){
        return name === Robin Hood;
    }

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

        setTimeout(function() {
            // 因为这个异步函数fn在未来的异步执行,我们把代码包装到 $apply 调用中,一边正确的观察到 model 的改变
            $scope.$apply(function() {
                deferred.notify(About to greet  + name + .);

                if (okToGreet(name)) {
                    deferred.resolve(Hello,  + name + !);
                } else {
                    deferred.reject(Greeting  + name +  is not allowed.);
                }
            });
        }, 1000);

        return deferred.promise;
    }

    var promise = asyncGreet(Robin Hood);
    promise.then(function(greeting) {
        console.info(Success:  + greeting);
    }, function(reason) {
        console.info(Failed:  + reason);
    }, function(update) {
        console.info(Got notification:  + update);
    });
}]);


</script>
</body>
</html>

 

其中我们可以通过defered.notify ,defered.resolve,defered.reject 传递参数给其后的链式操作。

ANGULAR JS PROMISE使用

标签:

原文地址:http://www.cnblogs.com/yg_zhang/p/4799480.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!