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

最新推荐文章于 2020-03-22 13:01:12 发布

小魏的马仔

最新推荐文章于 2020-03-22 13:01:12 发布

阅读量1.8k

点赞数

分类专栏： angularJS 文章标签： html angularjs 异步

本文链接：https://blog.csdn.net/xuexiiphone/article/details/51850837

版权

angularJS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

代码结构

这里写图片描述

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方法，等待异步返回结果，进行链式处理。第三个是不需要链式处理的方法或是代码，无需等待异步消息，直接执行。

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

弹出begin an asyn function
弹出no need asyn function and code!
弹出asyn back ok

主要应用技术

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

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

小魏的马仔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularJS系列之$q处理异步通知

代码结构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
复制链接

扫一扫