zoukankan      html  css  js  c++  java
  • AngularJs $q promise

    angularjs提供的$q服务是对Promises规范的一个实现。$q服务可以把一段异步的代码封装成同步的样式。
    为啥是样式,因为异步还是异步,它并不会柱塞代码,只是看起来像同步代码。
    $q.when('abc').then().then();
    下面的代码演示了$q的构造函数的使用方法。$q的构造函数接受一个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方法接受2个function作为参数,第一个是resolve,第二个是reject。其实把ajax请求改写成promise并不能体现$q的威力。
    改写后代码跟原来的代码没有太大的差别。

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

    promise形式只是把2个回掉提到了then方法里,只是看起来更同步了一点而已。
    其实$http服务本身就是通过$q来实现的promise,所以当你使用$q来做ajax的时候已经非常promise了。

    $q最大的好处我觉得在于$q.all方法,它可以等待多个promise完成之后在执行相应的代码,下回分享。

  • 相关阅读:
    Dapper的基本 理论 知识
    路由
    WebForm+一般处理程序+Ajax聊天
    Jquer + Ajax 制作上传图片文件
    (3.4)表相关操作之完整性约束
    (3.3)表相关操作之数据类型
    (3.2)表相关操作之表的增删改查
    (3.1)表相关操作之存储引擎介绍
    常用模块
    模块与包
  • 原文地址:https://www.cnblogs.com/kklldog/p/5846652.html
Copyright © 2011-2022 走看看