AngularJS中的$http、$q服务和promise对象的联系

原创 2016年08月09日 15:41:25

一、介绍:


$http服务是AngularJS系统自带的,可以用来进行网络通信、获取远程服务器的数据。要记住的是,$http是对浏览器XMLHttpRequest的封装,也就是说,它其实是Ajax。

首先为了用$http发起请求,我们得先找到一个可以测试的API,这里我用:https://randomuser.me/api/来测试:用get请求,它能够返回json格式的一个随机用户的资料。具体的介绍就不说了,大家可以看看这个网页:https://randomuser.me/。比如我在浏览器中输入,可以看到返回的数据:
测试API

二、$http的基本用法:


使用的时候写好几个参数:

  • options:包括url、method(get或post)
  • successFn:成功的回调
  • errorFn:失败的回调

格式:

$http(options).success(successFn).error(errorFn)

例子:(html文件就是一个按钮和显示结果的文本框,在这里就不写出来了)

angular.module('myDemo', [])

    .controller('myController', ['$scope', '$http', function ($scope, $http) {
        $scope.testHttp = function () {
            $http({
                method: 'GET',
                url: 'https://randomuser.me/api/'
            }).success(function (data) {    // 这里的data的类型是object,并且,它已经是返回数据的“数据”部分(如暂时不理解,后面会说到)
                console.log(angular.toJson(data, true));
                $scope.result = data;
            }).error(function (err) {
                console.log(err);
            })
        }
    }]);

这里,$http(options)返回的是一个被封装的promise对象,我们可以console.log出来看看:
$http返回的promise对象
可以看到,黑色部分圈起来的是基本的promise部分(拥有then,catch,finally函数),除了这些函数以外,这个promise对象还有success和error函数(见红色横线),这是$http返回的时候封装的,供我们使用的时候更方便。比如上述例子中,注释里说,success的回调函数返回的data直接就是我们想要的“数据部分”,那么如果我用的是then,那么返回的除了数据部分,还有额外的部分(比如状态码),这时候我就得自己拿出这个“数据部分”,代码如下:

var promise = ...;  // 省略$http过程

promise.then(function (data) {
        // realData被包含在data的“data”字段中,一般它才是我们想要的
        var realData = data.data;
        console.log(realData);
    }, function (err) {

    });

三、$q的介绍与用处:


在上述例子中,我们是在Controller层写了网络请求。但是我们知道,在AngularJS的MVC框架之中,业务逻辑(包括网络请求)的部分应该尽可能写到Service层中,而让Controller的逻辑尽可能少。但是,怎么把网络请求最终得到的有用的数据,返回给controller呢?这里有两种思路:

  • 方法一:把$http(options)返回的promise对象直接在Service中返回。在controller中拿到之后,再写success和error的回调。
  • 方法二:在Service中返回一个自定义的promise对象,用来回调给controller。这里的回调者,由$q创建的“defered”对象来担任。

方法一写起来比较简单,在这里就不演示了。
在演示方法二之前,先简单介绍一下AngularJS的qq服务是在AngularJS中用来创建promise对象的,但它首先创建一个defered对象:

var defered = $q.defer();

打印该defered对象:
defered对象属性一览
可以看到它有3个方法:resolve,reject,notify,分别对应于接受、拒绝、通知,具体用法在这里就不说了。还有一个promise属性,它的值就是一个基本的promise对象,主要用来返回。比如上面的例子,我可以这样写:

services.js

...
    .factory('userService', ['$http', '$q', function ($http, $q) {

        var userService = {};   // 返回的服务

        this.urlForRandomUser = "https://randomuser.me/api/";

        var that = this; // 获取当前作用域,下面要用到
        userService.getRandomUser = function () {

            var defered = $q.defer();

            $http.get(that.urlForRandomUser)
                .success(function (data) {
                    defered.resolve(data.results[0]);
                })
                .error(function (err) {
                    defered.reject(err);
                });
            return defered.promise; // 把defered对象中的promise对象返回出来
        };

controllers.js

...
    .controller('firstController', ['$scope', 'userService', function ($scope, user) {

        $scope.getUser = function () {

            function success(data) {
                var str = angular.toJson(data, true);   // 用angular的格式化json的方法,更为清晰
                $scope.result = str;
            }

            function error(err) {
                $scope.result = err;
                alert('error occured!\n' + err);
            }

            // 注意这里不能用success或error函数,用then就好
            user.getRandomUser().then(success, error);
        }

    }])

要注意的是最后那里,defered的promise是基本的promise对象,并没有success和error函数,所以要用then来执行回调。

版权声明:本文为博主原创文章,未经博主允许不得转载。

$q -- AngularJS中的服务

既然是用来处理异步编程的,那么在浏览器端的JS里,主要是2种: setTimeout 和 Ajax 请求. promise 的使用就很像Ajax请求的成功和失败回调。 此承诺/延迟(promise...
  • renfufei
  • renfufei
  • 2014年02月13日 22:02
  • 75268

angular中$q.all用法

$q.all是用于执行多个异步任务进行回调,它可以接受一个promise的数组,或是promise的hash(object)。任何一个promise失败,都会导致整个任务的失败。 例1:接受一个pr...

AngularJs中promise 和 $q 的一点解释

以前只知道简单的ajax请求,也就是请求回调的模式,看了angularJs中大规模的promise, 尤其是$q 和defer , promise 以及怎么resolve,reject非常疑惑,在...

Angular $q 完全指南

本文转自:点击打开链接 如果想使用 $http 或者其他异步操作, 那 $q 是必须要掌握的概念啦. Let's get started! 如何理解$q, deferred obj...

在AngularJS中使用$q同步读取服务器数据

今天在写AngularJS Service,然后希望在Controller中使用Service提供Model。架构上,我希望Controller可以直接获得数据,因此有了“同步读取”数据的想法。 ...

angularJS中的promise模式以及通过$q解决异步

引言 说到promise,不得不说的就是回调函数 那么什么是回调函数呢? function test(callback){//有一个叫做test的function var a=1; ...

AngularJS中异步操作与$q.defer()

var deferred = $q.defer();\\生成deferred异步对象 deferred.resolve(rtns);\\执行到这里时,改变deferred状态为执行成功,返回rtns为...

AngularJS 的 $q 和 Promise

了解Promise 在谈论Promise之前我们要了解一下一些额外的知识;我们知道JavaScript语言的执行环境是“单线程”,所谓单线程,就是一次只能够执行一个任务,如果有多个任务的话就要排...

angularJS系列之$q处理异步通知

代码结构html代码

angularjs系列之轻松使用$q进行异步编程

http://www.myext.cn/javascript/a_6436.html 第一部分关于js中的异步编程   异步编程简单的说就是你写了一段代码,但他不会按照你书写代码的顺序...
  • wjy397
  • wjy397
  • 2016年07月15日 15:40
  • 621
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS中的$http、$q服务和promise对象的联系
举报原因:
原因补充:

(最多只允许输入30个字)