AjaxAngularJs $q promise

angularjs提供的$q服务是对Promises规范的多少个落到实处。$q服务能够把一段异步的代码封装成同步的体制。
为什么是样式,因为异步照旧异步,它并不会柱塞代码,只是看起来像一只代码。
$q.when(‘abc’).then().then();
上面的代码演示了$q的构造函数的拔取方法。$q的构造函数接受3个function(resolve,reject)的函数,resolve是打响的回掉,reject是没戏的回掉。
普通Ajax请求都以异步的,通过success,failed回掉来处理结果。通过$q服务大家得以把那一个ajax请求改写成promise的款型。
当然这一个接口是自家透过$timeout服务模拟了二个2s过来的ajax请求。

html:

<!DOCTYPE html>
<html>
    <head>
          <meta charset="UTF-8">
    </head>
    <body ng-app="app" ng-controller="ctrl" >
        <style>
            .valid-error{
                color:red
            }
        </style>
        <form name="form" novalidate>
             <input type="text" ng-model="id">
             <input type="button" value="Test" ng-click='doTest()'>
        </form>
    </body>
    <script src="bower_components/angular/angular.js">
    </script>
<html>

javascript:

        var app = angular.module('app',[]);
        app.factory('dataService',function($timeout){
            var service={};
            service.persons=[{id:1,name:'Jim'},{id:2,name:'Tom'},{id:3,name:'Agile'}];
            service.getName=function(id,callback,errorCallback){
                $timeout(function(){
                    for(var i in service.persons){
                        var person = service.persons[i];
                        if(person.id==id){
                            callback(person.name);
                            return;
                        }
                    }
                    errorCallback('can not find person by id: '+id);
                },2000);
            };

            return service;
        });

        app.controller('ctrl',function($scope,$q,dataService){
            $scope.id='';

            function getName(id){
              return $q(function(r,j){
                  dataService.getName(id,function(data){
                      r(data);
                  },function(data){
                      j(data);
                  });
              });
            };

            $scope.doTest=function(){
               var id = $scope.id;
               getName(id).then(function(data){
                   alert('Name is '+data);
               },function(data){
                   alert('failed: '+data);
               });
            }

            console.log('done');


        });

then方法接受一个function作为参数,第二个是resolve,第二个是reject。其实把ajax请求改写成promise并不或许显示$q的威力。
改写后代码跟原来的代码没有太大的出入。

no promise:
getName(id,function(){},function());
promise:
getName(id).then(function(){},function(){});

promise格局只是把一个回掉提到了then方法里,只是看起来更一起了一点而已。
实质上$http服务自身就是通过$q来促成的promise,所以当您使用$q来做ajax的时候已经尤其promise了。

$q最大的好处作者认为在于$q.all方法,它可以等待多少个promise达成以往在实施相应的代码,下回分享。

相关文章