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。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。