什麼是非同步執行？

各語句執行結束的順序與語句執行開始的順序並不一定相同。在angularJS中，可以理解成介面可以操作，但是有一個程式在後面默默的執行，執行成功後可以控制介面顯示結果。

AngularJS如何實現非同步

在angularJS的控制器中定義的函式、語句預設都是同步執行，當需要使用非同步時，可以通過$q實現，根據有無後臺數據請求，這裡分兩種實現方式：

第一種實現方式，無有後臺請求

//定義一個非同步方法
$scope.init_q = function(){
        //-------------
        // 其他語句
        //-------------
        return $q(function (resolve, reject) {
            $timeout(function () {
                try{
                   //-------------
                   //    編寫自己的業務
                   //-------------
                    resolve("resolve");
                }catch (e){
                    reject("reject");
                }
            },1000)
        });
}

//執行非同步
$scope.init_q().then(function(data){
        console.log("執行了resolve方法，收到資料：",data);
},function(data){
        console.log("執行了reject方法，收到資料：",data);
});
 

第二種實現方式，有後臺請求

 //定義一個非同步,第二種
    $scope.init_q_2 = function(){
        //通知這是一個延時請求
        var deferred = $q.defer();
        //獲取請求資料
        $scope.curBusiUser = localStorage.getItem('curBusiUser');
        var _config = {
            responseType: 'json',
            cache: false
        };
        _config.headers = {
            hy_serviceName: 'clear'
        };
        var _data={
            curBusi:$scope.curBusiUser
        }
        //向後臺服務傳送請求
        $http.post('http://172.20.184.218:7770/ywsdWebApp/serviceInvoke',_data , _config).success(function (data) {
            try{
                deferred.resolve(data);
            }catch (e){
                deferred.reject("reject");
            }
        }).error(function () {
            deferred.reject("reject");
        });
        return deferred.promise;
    }

    //執行非同步
    $scope.init_q_2().then(function(data){
        //---------------
        //業務處理
        //---------------
        console.log("執行了resolve方法，收到資料：",data);
    },function(data){
        //---------------
        //業務處理
        //---------------
        console.log("執行了reject方法，收到資料：",data);
    });
 

demo示例

實現方式，可以直接寫在控制器中，也可以寫到服務中，demo是直接在controller中編寫，頁面程式碼：

<style>
    .main{
        width:100vw;
        height:100vh;
        background: #aaaaaa;
    }
</style>
<ons-page ng-controller="demoDeferController" >
    <ons-scroller>
        <div class="main">
            當前資料：{{num}}

        </div>

    </ons-scroller>
</ons-page>
 

控制器程式碼：

/**
 * Created by GeneralMou on 2018/9/27.
 */
/**
 * Created by GeneralMou on 2017/7/27.
 */
app.controller('demoDeferController', ['$scope','$q','$http','$timeout',function($scope,$q,$http,$timeout){

    //同步
    $scope.init = function(){
        $scope.num = 0;
        while($scope.num<20000){
            console.log("$scope.num",$scope.num);
            $scope.num++;
        }
    }

    //$scope.init();


    //非同步
    $scope.init_q = function(){
        $scope.num = 0;
        return $q(function (resolve, reject) {
            $timeout(function () {
                try{
                    while($scope.num<20000){
                        console.log("$scope.num",$scope.num);
                        $scope.num++;

                    }
                    resolve("resolve");
                }catch (e){
                    reject("reject");
                }
            },1000)
        });
    }
    /**
    $scope.init_q().then(function(data){
        console.log("執行了resolve方法，收到資料：",data);
    },function(data){
        console.log("執行了reject方法，收到資料：",data);
    });**/




    //定義一個非同步,第二種
    $scope.init_q_2 = function(){
        //通知這是一個延時請求
        var deferred = $q.defer();
        //獲取請求資料
        $scope.curBusiUser = localStorage.getItem('curBusiUser');
        var _config = {
            responseType: 'json',
            cache: false
        };
        _config.headers = {
            hy_serviceName: 'clear'
        };
        var _data={
            curBusi:$scope.curBusiUser
        }
        //向後臺服務傳送請求
        $http.post('http://172.20.184.218:7770/ywsdWebApp/serviceInvoke',_data , _config).success(function (data) {
            try{
                deferred.resolve(data);
            }catch (e){
                deferred.reject("reject");
            }
        }).error(function () {
            deferred.reject("reject");
        });
        return deferred.promise;
    }

    //執行非同步
    $scope.init_q_2().then(function(data){
        //---------------
        //業務處理
        //---------------
        console.log("執行了resolve方法，收到資料：",data);
    },function(data){
        //---------------
        //業務處理
        //---------------
        console.log("執行了reject方法，收到資料：",data);
    });
}]);