AngularJS如何实现异步

本文深入探讨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);
        });

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值