1.学习一下Angularjs的promisee

时间 2019-11-30

标签学习一下 angularjs promisee 栏目 AngularJS 繁體版

原文原文链接

1.首先来了解一下promisee：html

在谈论Promise以前咱们要了解一下一些额外的知识；咱们知道JavaScript语言的执行环境是“单线程”，所谓单线程，就是一次只可以执行一个任务，若是有多个任务的话就要排队，前面一个任务完成后才能够继续下一个任务。segmentfault

这种“单线程”的好处就是实现起来比较简单，容易操做；坏处就是容易形成阻塞，由于队列中若是有一个任务耗时比较长，那么后面的任务都没法快速执行，或致使页面卡在某个状态上，给用户的体验不好。promise

固然JavaScript提供了“异步模式”去解决上述的问题，关于“异步模式”JavaScript提供了一些实现的方法。app

回调函数（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 时，执行顺序时：二、一、4.spa

得益于看了这个博客：https://segmentfault.com/a/1190000002788733。