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完成之后在执行相应的代码,下回分享。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JetpropelledSnake

Python面试题之Python面试题汇总

(1)与java相比:在很多方面,Python比Java要简单,比如java中所有变量必须声明才能使用,而Python不需要声明,用少量的代码构建出很多功能;...

1.9K3
来自专栏.NET后端开发

ADO.NET入门教程(四) 品味Connection对象

摘要 前几篇文章,我都没有详细讲解Data Provider核心对象,因为我希望在讲解这些对象之前,让大家对一些基础的概念有很好的认识。在上一篇文章《你必须知道...

3416
来自专栏.NET开发那点事

AngularJs $q promise

angularjs提供的$q服务是对Promises规范的一个实现。$q服务可以把一段异步的代码封装成同步的样式。 为啥是样式,因为异步还是异步,它并不会柱塞...

900
来自专栏芋道源码1024

注册中心 Eureka 源码解析 —— EndPoint 与 解析器

目前有多种 Eureka-Server 访问地址的配置方式,本文只分享 Eureka 1.x 的配置,不包含 Eureka 1.x 对 Eureka 2.x 的...

850
来自专栏程序员互动联盟

六款值得推荐的android(安卓)开源框架简介

1、volley 项目地址 https://github.com/smanikandan14/Volley-demo (1) JSON,图像等的异步下载...

35010
来自专栏极客猴

Python 读取文本文件的内容

数据存储方式有很多种。如果数据的数据量比较大、数据类型繁多且要求便于搜索,我们一般会选择存储到数据库中。如果数据内容只是一些的文本信息,我们可以将数据存储到 T...

1011
来自专栏恰同学骚年

Hadoop学习笔记—7.计数器与自定义计数器

  在上图所示中,计数器有19个,分为四个组:File Output Format Counters、FileSystemCounters、File Input...

732
来自专栏Coding迪斯尼

利用web work实现多线程异步机制,打造页面单步调试IDE

我们已经完成了整个编译器的开发,现在我们做一个能够单步调试的页面IDE,完成本章代码后,我们可以实现下面如图所示功能:

723
来自专栏有趣的django

Flask请求扩展和数据库连接池

2020
来自专栏Golang语言社区

package http

要管理代理、TLS配置、keep-alive、压缩和其他设置,创建一个Transport:

1394

扫码关注云+社区