1.学习一下Angularjs的promisee
1.首先来了解一下promisee:
在谈论Promise
之前我们要了解一下一些额外的知识;我们知道JavaScript语言的执行环境是“单线程”,所谓单线程,就是一次只能够执行一个任务,如果有多个任务的话就要排队,前面一个任务完成后才可以继续下一个任务。
这种“单线程”的好处就是实现起来比较简单,容易操作;坏处就是容易造成阻塞,因为队列中如果有一个任务耗时比较长,那么后面的任务都无法快速执行,或导致页面卡在某个状态上,给用户的体验很差。
当然JavaScript提供了“异步模式”去解决上述的问题,关于“异步模式”JavaScript提供了一些实现的方法。
- 回调函数(callbacks)
- 事件监听
- Promise对象
2.在Angularjs中使用promisee:
//使用$q服务 创建defer对象
var defer = $q.defer();
//通过defer对象创建promise对象
var promise = defer.promise;
3.defer有哪些方法:
promise.then(function_success(value){
console.log("in promise ---- success");
console.log(value);
},function_error(error){
console.log("in promise ---- error");
console.log(value);
});
(1).resolve(param): 当defer对象调用resolve方法时,会回调ptomise.then里面的
function_success方法。
(2).reject(param):当defer对象调用reject方法时,会回调ptomise.then里面的
function_error方法。
来一个小demo
<html> <head> <meta charset="utf-8"> <title>学习AngularJS promise</title> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="MyApp"> <div ng-controller="MyController"> <label for="flag">成功 <input id="flag" type="checkbox" ng-model="flag" /><br/> </label> <div ng-cloak> {{status}} </div> <hr/> <button ng-click="handle()">点击我</button> </div> </div> </body> <script> angular.module("MyApp", []) .controller("MyController", ["$scope", "$q", function ($scope, $q) { $scope.flag = false; $scope.handle = function () { var deferred = $q.defer(); var promise = deferred.promise; promise.then(function (result) { console.log("1"); result = result + "you have passed the first then()"; $scope.status = result; return result; }, function (error) {
console.log("3"); error = error + "failed but you have passed the first then()"; $scope.status = error; deferred.reject("my test."); return error; }).then(function (result) {
console.log("4"); alert("Success: " + result); }, function (error) {
console.log("5"); alert("Fail: " + error); }) if ($scope.flag) { console.log("2"); deferred.resolve("you are lucky!"); } else {
console.log("0"); deferred.reject("sorry, it lost!"); } } }]); </script>
执行结果:当$scope.flag=true 时,执行顺序时:2、1、4.
得益于看了这个博客:https://segmentfault.com/a/1190000002788733。