angularJS系列之$q处理异步通知

「爱情、让人受尽委屈。」 2022-09-23 08:22 181阅读 0赞

### 代码结构 ###

![这里写图片描述][20160707140238506]

### html代码 ###

<!DOCTYPE html>
    <html ng-app="demoForQ">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <script src="./lib/angular.js"></script>
        <script src="./js/app.js"></script>
        <script src="./js/service.js"></script>
    </head>
    <body>
    <div ng-controller='demoForQController'>
    
    </div>
    </body>
    </html>

### js代码 ###

//app.js
    /** * Created by jywl on 2016/7/7. */
    var demoForQ = angular.module('demoForQ', ['demoForQ.service']);
    demoForQ.controller('demoForQController', function ($scope,AsynFactory) { 
        alert("begin an asyn function");
        var promise = AsynFactory.query(); // 同步调用，获得承诺接口
        promise.then(function (resolve) {   // 调用承诺API获取数据 .resolve
            alert("asyn back " + resolve);
        }, function (error) {   // 处理错误 .reject
            alert("asyn back error " + error);
        }, function (update) { 
            alert("asyn notify " + update);
        });
        alert("no need asyn function and code!");
    });

//service.js
    /** * Created by jywl on 2016/7/7. */
    angular.module('demoForQ.service', [])
        .factory('AsynFactory', function ($q, $interval) { 
            return {
                query: function () { 
                    var deferred = $q.defer(); // 声明延后执行，表示要去监控后面的执行
                    deferred.notify('ready to go');
                    $interval(callAtInterval, 1000, 1);
                    function callAtInterval() { 
                        deferred.resolve('ok');
                    }
    
                    //deferred.reject('error');
                    return deferred.promise;   // 返回承诺，这里并不是最终数据，而是访问最终数据的API
                } // end query
            };
        });

### 效果说明 ###

证明$q返回的promise（承诺，或者叫做允诺）对象，能够接收异步返回的消息，并按照消息类型的不同进行不同的逻辑判断，从而避免“金字塔格式”的js异步处理代码。

controller里面有三个`alert` 第一个说明要处理异步信息了，第二个是promise的then方法，等待异步返回结果，进行链式处理。第三个是不需要链式处理的方法或是代码，无需等待异步消息，直接执行。

程序正确运行的先后顺序应该是：

1.  弹出`begin an asyn function`
2.  弹出`no need asyn function and code!`
3.  弹出`asyn back ok`

### 主要应用技术 ###

1.  angularJS的service中的factory方法，创建公共的方法函数。
2.  angularJS的$interval，实现倒计时功能。
3.  angularJS的$q，处理异步返回信息。
4.  然后没了。。。

所有原创文章，均首发CSDN-[柠檬加冰博客][Link 1]

[20160707140238506]: /images/20220721/eda96fa7775841f4ac04c74956ab4c5f.png
[Link 1]: http://blog.csdn.net/xuexiiphone