您的位置：首页 > Web前端 > AngularJS

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

2016-07-07 14:11 417 查看

代码结构



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-柠檬加冰博客
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html angularjs 异步
相关文章推荐
新的分享
章节导航