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。 

posted @ 2018-02-27 15:36  zailushan  阅读(151)  评论(0编辑  收藏  举报