AngularJS如何实现异步

Posted 2022-12-05 zhangyufeng0126

什么是异步执行？

各语句执行结束的顺序与语句执行开始的顺序并不一定相同。在angularJS中，可以理解成界面可以操作，但是有一个程序在后面默默的执行，执行成功后可以控制界面显示结果。

AngularJS如何实现异步

在angularJS的控制器中定义的函数、语句默认都是同步执行，当需要使用异步时，可以通过$q实现，根据有无后台数据请求，这里分两种实现方式：

第一种实现方式，无有后台请求

//同步
    $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
        ;
        var param = 
            huhaos: $scope.curBusiUser
        ;
        $hyHttp.post('wxgetCustomerList', config, param).success(function (bindingResult) 
            try
                deferred.resolve(bindingResult);
            catch (e)
                deferred.reject("reject");
            
        ).error(function () 
            deferred.reject("reject");
        );
        return deferred.promise;
    

    //执行异步
    $scope.init_q_2().then(function(data)
        //---------------
        //业务处理
        //---------------
        $scope.num = data;
        console.log("执行了resolve方法，收到数据：",data);
    ,function(data)
        //---------------
        //业务处理
        //---------------
        console.log("执行了reject方法，收到数据：",data);
    );

获取数据后执行异步请求

    //定义一个异步,第二种
    $scope.init_q_2 = function()
        //通知这是一个延时请求
        var deferred = $q.defer();
        if ( $scope.selectDay) 
            $scope.currentDateTT = $scope.updateTime.substring(0, 4) + '-' +$scope.updateTime.substring(5, 7) + '-' + $scope.updateTime.substring(8, 10) ;
            $scope.tjzq="D";
         else if (  $scope.selectMonth) 
            $scope.currentDateTT = $scope.updateTime.substring(0, 4) + '-' + $scope.updateTime.substring(5, 7) ;
            $scope.tjzq="M";
         else 
            $scope.tjzq="Y";
            $scope.currentDateTT = $scope.updateTime.substring(0, 4) ;
        
        var config = 
            responseType: 'json',
            cache: false
        ;
        var param = 
            jldbh: $rootScope.jldbhQ,
            tjzq:$scope.tjzq,
            sjsj: $scope.currentDateTT
        ;
        $hyHttp.post('appGetjzdInfor', config, param).success(function (bindingResult) 
            try
                deferred.resolve(bindingResult);
            catch (e)
                deferred.reject("reject");
            
        ).error(function () 
            deferred.reject("reject");
        );
        return deferred.promise;
    ;

  //执行异步
    $scope.init_q_2_success = function(data)
        //---------------
        //业务处理
        //---------------
        console.log(data);
        $scope.userjzdInfor = JSON.parse(data.content);
        console.info('22223',$scope.userjzdInfor);
        console.log("执行了resolve方法，收到数据：",data);
    
    $scope.init_q_2_fail= function(data)
        //---------------
        //业务处理
        //---------------
        console.log("执行了reject方法，收到数据：",data);
    

 //执行异步
        $scope.init_q_2().then(function(data)
            $scope.init_q_2_success(data);
        ,function(data)
            $scope.init_q_2_fail(data);
        );