$q异步操作使用按钮

67 阅读2分钟

一般情况下,我们需要在一个$http请求里面再发送一个$http请求,就需要使用延迟加载对象的$q服务。

这个时候,我们需要将这个$http服务放进一个封装的函数,同时在函数内部声明一个延迟加载对象。如

angular.module('app').controller('positionCtrl',['$q','$http','$state','$scope','cache',function ($q,$http,$state,$scope,cache) {//②注入$q

    function getPosition(){ //③封装一个函数将异步的请求放进去
         var def = $q.defer()//④在函数内部声明一个延迟加载对象
         $http.get('url').success(function(resp){//①$http服务
               def.resolve(resp);//⑥当执行请求成功的时候,使用def.resole(将获取的数据)传回去也可以不传
         }).erroe(function(err){
               def.reject(err); //⑦如果执行失败就使用def.reject()
         }); 
         return def.promise; //⑤在函数的末尾将延迟加载对象的promise属性返回回来
    } //⑦第一个函数编写完成




      //⑬为了美观,在定义一个函数,同样的里面也有一个$http请求
      function getCompany(id) {//传入一个id
           $http.get('url2'+id).success(function(resp){
               $scope.company = resp;//⑭获取company的值
           })
      }



      //⑧当封装的getPosition函数返回一个promise对象的是,它就会有一个then函数
      getPosition().then(function(obj){ //⑨then就表示这个异步请求完成之后所执行的一个函数
          //⑩then里面可以填两个函数,第一个对应def.resolve
          //⑫这个函数传入的参数就是对应def.resolve()传进来的参数
          console.log(obj);
          //⑮在此调用函数getCompany并传入值
          getCompany(obj.companyId);//拿到的值
                   },function(){
          //⑪第二个函数对应def.reject
                   })


}]);
'use strict';
angular.module('app').controller('positionCtrl',['$q','$http','$state','$scope','cache',function ($q,$http,$state,$scope,cache) {
    $scope.isLogin = false;
    function getPosition() {
        var def = $q.defer();
        $http.get('data/position.json',{ //1
            params:{
                id : $state.params.id
            }
        }).success(function(resp){
            $scope.position = resp;
            def.resolve(resp);
        }).error(function (err) {
           def.reject(err);
        });
        return def.promise;//2
    }
    function getCompany(id) {
        $http.get('data/company.json?id='+id).success(function(resp){
            $scope.company = resp;
        })
    };
    getPosition().then(function(obj){//4
        getCompany(obj.companyId);//5
    });

    $q.all([fun1(),fun2()]).then(function (result) {})//6
}]);

/*
* $q是为了解决异步的问题
* 1、这里有个异步请求,我们在前面建一个$q.defer()函数来创建一个defer对象,延迟加载对象,
* 2、在异步请求下面返回def.promise属性,它也是一个对象,当我们处理完异步请求/操作的时候,我们就调用它的resolve()函数,把需要传入的参数传入进来,
* 当发送错误的时候,我在调用reject()函数,
* 3、这样当我们直接调用getPosition()函数的时候,得到的却是promise对象,
* 4、这个promise对象对象有一个then函数,这个then函数的作用就是当我们的异步请求调用resolve()之后,
* 5、它就会调用第一个传入的函数,同时把resolve()传入的参数传入进来。这样就可以把一个异步的操作变成一个同步的写法。
*
*
* 6、还有一种特殊的操作,就是我想当这两个操作同时执行完成之后再执行对应的操作,
* */