Angularjs中的promise

promise 是一种用异步方式处理值的方法,promise是对象,代表了一个函数最终可能的返回值或抛出的异常。在与远程对象打交道非常有用,可以把它们看成一个远程对象的代理。

要在Angular中创建promise需要使用内置的$q服务。先用factory定义一个服务,注入$q服务。

angular.module(‘readApp‘).factory(‘asyncService‘, [
    "$q", function ($q) {
         var myAsync=function(flag) {
            var deferred = $q.defer();
            if (flag) {
                deferred.resolve("well done!");
            } else {
                deferred.reject("lost!");
            }
             return deferred.promise;
         }
        return {
            myAsync: myAsync
        };
    }
]);

获得deferred的方法和jquery不同,但resolve和reject是一样的,最后返回的是promise属性,而不是promise方法。再看如何调用:

angular.module(‘readApp‘).controller(‘testCtrl‘, ["$scope", "asyncService", function ($scope, asyncService) {
        $scope.flag = true;
        $scope.handle = function () {
            asyncService.myAsync($scope.flag).then(function (result) {
                $scope.status = result;
                return result;
            }, function (error) {
                $scope.status = error;
                return error;
            });
        }
    }])

获取到服务后,调用then方法。then有三个参数,分别对应成功回调、失败回调和通知回调。这个和jquery是一致的

<div  class="container">
    <label for="flag">成功
        <input type="checkbox" id="flag" ng-model="flag" name="name" /> <br />
        <div>{{status}}</div>
        <button ng-click="handle()">点击</button>
    </label>
</div>
<footer-n

结果:  

不同的是,Angular的promise没有公布jquery那么多方法,我们可以看一下deferred.promise这个属性,它是一个$$state对象。根据Promise/A规范,一个Promise只要具备一个then方法即可。

注意到,Angular中的deferred有notify、reject、resolve三个主要方法和一个promise属性,而这个promise的原型连中包含了我们调用的then方法,then方法在执行完之后会派生一个新的promise,因此可以链式调用。没有done和fail,但是还提供了catch和finally方法。catch就相当于是error方法了。而finally方法就像强类型语言中的场景一样,当我们需要释放一个资源,或者是运行一些清理工作,不管promise是成功还是失败时,这个方法会很有用。要注意的是finally是ie中的一个保留字,需要下面这样调用:

promise[‘finally‘](function() {});

  

除了defer()方法,$q还有all和when方法,all(promises)可以将多个promise合并成一个,但如果任意一个promise拒绝了,那么结果的promise也会拒绝。而when(value)方法把一个可能是值或者promise包装成一个$q promise。有了jQuery中的when,这两个方法不难理解。关于这三个方法的示例可以参考这篇博客:AngularJS 中的Promise --- $q服务详解

Angular的$q的灵感是来自[Kris Kowal‘s Q],从官方的注释中可以看到

 * This is an implementation of promises/deferred objects inspired by
 * [Kris Kowal‘s Q](https://github.com/kriskowal/q).
  * $q can be used in two fashions --- one which is more similar to Kris Kowal‘s Q or jQuery‘s Deferred
  * implementations, and the other which resembles ES6 promises to some degree.

  支持两种风格,可以像Q库或者jQuery的deferred一样,也可以用ES6语法,文档给出了示例,也是就构造函数法来定义:

var asyncGreet = function (name) {
            return $q(function (resolve, reject) {
                console.log(resolve, reject);
                setTimeout(function () {
                    if (name=="stone") {
                        resolve(‘Hello, ‘ + name + ‘!‘);
                    } else {
                        reject(‘Greeting ‘ + name + ‘ is not allowed.‘);
                    }
                }, 1000);
            });
        };

  通知(notify/progress)回调还不支持这种写法。对比看,没太大差别。

  

function asyncGreet(name) {
    var deferred = $q.defer();
    setTimeout(function() {
     deferred.notify(‘About to greet ‘ + name + ‘.‘);
     if (okToGreet(name)) {
        deferred.resolve(‘Hello, ‘ + name + ‘!‘);
      } else {
        deferred.reject(‘Greeting ‘ + name + ‘ is not allowed.‘);
      }
     }, 1000);
   return deferred.promise;
  }

大致看下源码如何实现:

Promise:

 

function Promise() {
    this.$$state = { status: 0 };
  }

  extend(Promise.prototype, {
    then: function(onFulfilled, onRejected, progressBack) {
      if (isUndefined(onFulfilled) && isUndefined(onRejected) && isUndefined(progressBack)) {
        return this;
      }
      var result = new Deferred();

      this.$$state.pending = this.$$state.pending || [];
      this.$$state.pending.push([result, onFulfilled, onRejected, progressBack]);
      if (this.$$state.status > 0) scheduleProcessQueue(this.$$state);

      return result.promise;
    },

    "catch": function(callback) {
      return this.then(null, callback);
    },

    "finally": function(callback, progressBack) {
      return this.then(function(value) {
        return handleCallback(value, true, callback);
      }, function(error) {
        return handleCallback(error, false, callback);
      }, progressBack);
    }
  });

创建了一个Promise对象包含一个$$state属性,然后扩展了then,catch,finally方法(注意后两个带了引号)。then的三个参数都是回调函数,对应成功、失败、通知回调,并在then方法中创建了一个deferred作为结果,将回调函数和创建的deferred都存入了数组,主意到这是一个二维数组,每个then对应的promise和回调函数都在这个数组里面。最后返回promise。而catch和finally内部也是调用的then。只要状态大于0也就promise获得了结果就用scheduleProcessQueue处理回调。 Deferred 内部包含了一个promise以及resolve、reject和notify三个方法。jQuery.deferred 中处理的是三个回调队列,Angular中处理的一个是二维数组。

$http的是一个promise对象:

var promise = $q.when(config);
       //some code

        promise = promise.then(thenFn, rejectFn);
      }
      if (useLegacyPromise) {
        promise.success = function(fn) {
          assertArgFn(fn, ‘fn‘);
          promise.then(function(response) {
            fn(response.data, response.status, response.headers, config);
          });
          return promise;
        };
        promise.error = function(fn) {
          assertArgFn(fn, ‘fn‘);

          promise.then(null, function(response) {
            fn(response.data, response.status, response.headers, config);
          });
          return promise;
        };
      } else {
        promise.success = $httpMinErrLegacyFn(‘success‘);
        promise.error = $httpMinErrLegacyFn(‘error‘);
      }

      return promise;

用then扩展了error和succes方法,因此我们可以这样使用:

booksData.getbookById(bookid).success(function(data) {
            vm.book = data;
        }).error(function (e) {
            console.log(e);
            vm.message = "Sorry, something‘s gone wrong ";
        });

$Interval也是一个promise对象。  

AngularJS 中的Promise --- $q服务详解

http://www.cnblogs.com/xing901022/p/4928147.html  

  

时间: 2024-11-08 11:47:45

Angularjs中的promise的相关文章

AngularJS 中的 Promise 和 设计模式

Promises And Design Patterns 写得好长好长好长长~ 解决 Javascript 异步事件的传统方式是回调函数:调用一个方法,然后给它一个函数引用,当这个方法完结的时候执行这个函数引用. $.get('api/gizmo/42', function(gizmo) { console.log(gizmo); // or whatever }); 看起来很不错对不对,不过,也有缺点的:首先,合并或者链接多个异步过程超复杂:要么就是大量的模板代码,要么就是嗯哼你懂的回调地狱(

AngularJS 中的Promise --- $q服务详解

    阅读目录 什么是Promise $q服务 先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 回到顶部 什么是Promise 以前了解过Ajax的都能体会到回调的痛苦,同步的代码很容易调试,但是异步回调的代码,会让开发者陷入泥潭,无法跟踪,比如: funA(arg1,arg2,function(){ funcB(arg1,arg2,function(){ funcC(arg

AngularJS 中的 Promise 和 设计模式(转)

原文地址:http://my.oschina.net/ilivebox/blog/293771 目录[-] Promise 简单例子 链式 Promise Parallel Promises And 'Promise-Ifying' Plain Values AngularJS 中的实际应用 实际链式例子 测试 Promise - 基于代码 Promises And Design Patterns 写得好长好长好长长~ 解决 Javascript 异步事件的传统方式是回调函数:调用一个方法,然后

angularJS中XHR与promise

angularJS应用是完全运行在客户端的应用,我们可以通过angularJS构建一个不需依赖于后端,同时能够实现动态内容和响应的web应用,angularJS提供了将应用与远程服务器的信息集成在一起的方法 $http服务 angularJS提供了内置的$http服务直接同外部进行通信,$http服务封装了浏览器原生的XMLHttpRequest对象 $http服务只接收一个参数对象,包含了用来生成http请求的配置内容,$http函数返回一个promise对象,具有success和error两

深入理解jQuery、Angular、node中的Promise

最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供基础功能.在用jQuery操作DOM的时候对Promise的使用欲不够强烈,最近学习node和Angular,需要用js写业务逻辑和数据操作代码的时候这种场景需求就出来了.一般来说事件适合在交互场景中运用,因为用户的行为本来就是分散的,而promise这样的流程控制适合在后台逻辑中处理业务. //j

Javacript和AngularJS中的Promises

promise是Javascript异步编程很好的解决方案.对于一个异步方法,执行一个回调函数. 比如页面调用google地图的api时就使用到了promise. function success(position){ var cords = position.coords; console.log(coords.latitude + coords.longitude); } function error(err){ console.warn(err.code+err.message) } na

AngularJS中实现无限级联动菜单(使用demo)

原文地址:http://www.cnblogs.com/front-end-ralph/p/5133122.html 昨天没来得及贴几个使用demo,今天补上,供有兴趣的同学参考 :) 1. 同步加载子选项demo2. 异步加载子选项demo3. 初始值回填demo4. 倒金字塔依赖demo directive的源代码请移步上一个帖子:http://www.cnblogs.com/front-end-ralph/p/5131687.html 1. 同步加载子选项在各联动菜单加载之前,我们已经通过

AngularJS中获取数据源的几种方式

在AngularJS中,可以从$rootScope中获取数据源,也可以把获取数据的逻辑封装在service中,然后注入到app.run函数中,或者注入到controller中.本篇就来整理获取数据的几种方式. ■ 数据源放在$rootScope中 var app = angular.module("app",[]); app.run(function($rootScope){ $rootScope.todos = [ {item:"",done:true}, {it

AngularJS 中 异步请求$http 对象的使用

 AngularJS 提供了一个类似jquery的$.ajax的对象,用于异步请求. 在AngularJS中对异步操作是推崇至极的,所以$http的操作都是异步的不像jquery.ajax里还提供了async参数. 对于官网的$http对象的总结和使用. 用法: $http(config); 参数: config (常用的参数标红,翻译了一下) config object Object describing the request to be made and how it should b