AngularJS如何实现异步

最新推荐文章于 2023-11-03 11:19:27 发布

原创最新推荐文章于 2023-11-03 11:19:27 发布 · 984 阅读

0 ·

CC 4.0 BY-SA版权

angularJS 专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨AngularJS中异步执行的概念，介绍如何通过$q服务实现无后台请求及有后台请求的异步操作，详细解析异步请求的处理流程与结果回调方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是异步执行？

各语句执行结束的顺序与语句执行开始的顺序并不一定相同。在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);
        });