Angular中的promise:

Promise是一种异步方式处理值的方法。代表了一个函数最 终可能的返回值或者抛出的异常

在之前，通常都是使用闭包或者回调来响应非同步的有意义数据

使用promise的目的是：获得功能组合和错误冒泡（error bubbling）能力的同时，保持 代码异步运行的能力。

$q的api：

　　defer():用来生成一个延迟对象 var defer =$q.defer();

　　reject():参数接收错误消息，相当于在回调函数中抛出一个异常，然后在下一个then中调用错误的回调函数。

　　all():参数接收为一个promise数组，返回一个新的单一promise对象，当这些promise对象对应defer对象全部解决这个单一promise对象才会解决，当这些promise对象中有一个被reject了，这个单一promise同样的被reject了

       when（）: 接收第一个参数为一个任意值或者是一个promise对象，其他 3个同promise的then方法,返回值为一个promise对象。第一个参数若不是promise对象则直接运行success回调且消息为这个对象，若为promise那么返回的promise其实就是对这个promise类型的参数的一个包装而已，被传入的这个promise对应的defer发 送的消息，会被我们when函数返回的promise对象所接收到

<script>

var app=angular.module("myApp",[])

.controller("myCtrl",["$scope","$q",function(s,$q){

var promise = $q.when(1, function(num) {／／参数不是promise,直接执行success回调且消息为这个对象

                  console.log("s" + num);

}, function() {

                console.log("e");

});

var defer1 = $q.defer();

var promise1 = defer1.promise;

var promise2 = $q.when(promise1, function(num) {

      console.log("s" + num);

           }, function() {

   console.log("e");

});

defer1.reject(1);

}]);

 </script>

结果：ｅ，ｓ１

 Demo2:

var defer = $q.defer();

var promise = defer.promise;

promise.then(function() {

       return $q.reject("success error");

}, function() {

       return $q.reject("error error");

}).then(function(info) {

       document.write("s:" + info + "<br/>");

}, function(info) {

       document.write("e:" + info + "<br/>");

});

defer.reject(1);//结果：e:error error

defer.resolve(1);//结果：e:success error

解释：reject():参数接收错误消息，相当于在回调函数中抛出一个异常，然后在下一个then中调用错误的回调函数。

demo2:

<!DOCTYPE html>

<html ng-app="myApp">

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<meta charset=utf-8 />

<script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>

<title>JS Bin</title>

</head>

<body ng-controller="myCtrl">

  <script>

    var app=angular.module("myApp",[])

    .controller("myCtrl",["$scope","$q",function(s,$q){

            var defer1 = $q.defer();

              var promise1 = defer1.promise;

              promise1.then(function(num) {

                        console.log("success" + num);

       },

       function(num) {

              console.log("error" + num);

       });

　　　　var defer2 = $q.defer();

　　　　var promise2 = defer2.promise;

      promise2.then(function(num) {

              console.log("success" + num);

       },

       function(num) {

              console.log("error" + num);

       });

      var promise3 = $q.all([promise1, promise2]);

                 promise3.then(function(num) {

                  console.log(num );

      }, function(num) {

                  console.log( num);

      });

//方式1

       defer1.resolve(1);

       defer2.resolve(2);

//方式2

 //defer1.reject(1);

    }]);

  </script>

</body>

</html>

结果：success1,success2, [1,2]

使用内置的$q服务，deferred API中提供了 一些方法。

（1）    创建一个deferred对象：var deferred = $q.defer();

deferred对象暴露了三个方法，以及一个可以用于处理promise的promise属性

deferred.resolve(value)：执行deferred promise   ,

　　　　    deferred.resolve({name:’Ari’,username:’@auser’ });

deferred.reject(reason):拒接的defferred promise

deferred.reject(“cant’t update user”);<===> deferred.resolve($q.reject("Can't update user"));　　　　　　　　

　　　　deferred.notify（value）: 用promise的执行状态来进行响应

给你一个demo自己去体会：

angular.module('myApp', [])

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

　　　     　　var getPullRequests = function() {

 　　　　　　　　var deferred = $q.defer(); // 从Github获取打开的angularjs pull请求列表

 　　　　$http.get('https://api.github.com/repos/angular/angular.js/pulls')

　　　　　　.success(function(data){ deferred.resolve(data); })

　　　　　　.error(function(reason){ deferred.reject(reason); })

 　　　　　　return deferred.promise;

 }

   return { // 返回工厂对象

　　　　getPullRequests: getPullRequests

    };

}]);

　　

promise对象可以通过defer.promise获取,下面是promise对象的api:

如何创建一个promise:

var promise = defer.promise;

　 promise对象可以通过defer.promise获取,下面是promise对象的api:

1，then(successFn, errFn, notifyFn)

　　　　在promise被执行或者拒绝之前，notifyFn回调可能会被调用0到多次，以提供过程状态的 提示

　　　　then()方法总是返回一个新的promise，可以通过successFn或者errFn这样的返回值执行或 者被拒绝。它也能通过notifyFn提供通知。

 .controller(“HomeController”,function($scope,GithubService){

   GithubService.makeMultipleRwquest(‘……’)

                  .then(function(result){

                  //处理结果

    }，

function（err）{

//请求失败，处理

}，function(percentComplete){

            $scope.progress= percentComplete;})；

});

2， Catch(errFn): 可以用.catch(function(reason){})取代err回调：

　　$http.get('/repos/angular/angular.js/pulls')

　　　　　.catch(function(reason) { deferred.reject(reason); });

3， finally(callback)：当我们需要释放 一个资源，或者是运行一些清理工作，不管promise是成功还是失败时，这个方法会很有用

注：不能直接调用这个方法，因为finally是IE中JavaScript的一个保留字。

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

demo:

<!DOCTYPE html>

<html ng-app="myApp">

<head>

<meta charset=utf-8 />

 <script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>

<title>JS Bin</title>

</head>

<body ng-controller="myCtrl">

  <script>

    var app=angular.module("myApp",[])

    .controller("myCtrl",["$scope","$q",function(s,$q){

         function f1(num) {

           document.write("success:" + (num++) + "<br/>");

           return num;

        }

        function f2(num) {

               document.write("errror:" + (num++) + "<br/>");

               return num;

        }

        var defer = $q.defer();

        var promise = defer.promise;

      //方式1

        // promise.then(f1,f2).then(f1,f2);

      // 方式2

        //promise.then(f1,f2);

        //promise.then(f1,f2);

     // 方式3

       promise.then(f1,f2).then(f1,f2);//结果  error:7     success:8

       // promise.catch(f2);

       // promise.finally(f2);

     //方式4

       //promise.finally(f2).then(f1,f2);

      defer.reject(7);

    }]);

  </script>

</body>

</html>

结果分别是什么呢？

提示：angular中的then的链式调用中如果defer发送的reject的那么 只有第一个promise是reject的回调，其他的都是resolve的回调

4， all() , 这个all()方法，可以把多个primise的数组合并成一个。当所有的promise执行成功后，会执行后面的回调。回调中的参数，是每个promise执行的结果。

当批量的执行某些方法时，就可以使用这个方法。

 var funcA = function(){

                var def = $q.defer();

                console.log("funcA");

                //some code

                return def.promise;

            }

var funcB = function(){

                var def = $q.defer();

                console.log("funcA");

                //some code

                return def.promise;

            }

$q.all([funcA(),funcB()])

            .then(function(result){

                console.log(result);

            });

　　

参考链接：http://www.cnblogs.com/fliu/articles/5288531.html

http://blog.csdn.net/renfufei/article/details/19174015

　　　　http://liubin.org/promises-book/#promises-overview

　　　　https://www.jianshu.com/p/5dc90b5e62c2

angular的异步处理$q的使用(promise)的更多相关文章

  1. angular的$q服务和promise模式

    此承诺/延迟(promise/deferred)实现的灵感来自于 Kris Kowal's Q CommonJS Promise建议文档 将承诺(promise) 作为和 异步执行操作(action) ...

  2. angular中$q用法, $q多个promise串行/同步/等待）， $q.all用法,使用

    $q的基本用法 function fn() { var defer = $q.defer(); setTimeout(function () { console.log(1); defer.resol ...

  3. js异步回调Async/Await与Promise区别 新学习使用Async/Await

    Promise,我们了解到promise是ES6为解决异步回调而生,避免出现这种回调地狱,那么为何又需要Async/Await呢?你是不是和我一样对Async/Await感兴趣以及想知道如何使用,下面 ...

  4. Angular通信$q服务和promise对象

    promise 约定(promise)是一个对象,表示在未来时间点会发生的某件事情,约定可以是三种状态之一:等待.完成或拒绝.约定将从等待状态开始,然后可以转换为完成或者拒绝状态,一旦约定完成或者被拒 ...

  5. 你所必须掌握的三种异步编程方法callbacks,listeners,promise

    目录: 前言 Callbacks Listeners Promise 前言 coder都知道,javascript语言运行环境是单线程的,这意味着任何两行代码都不能同时运行.多任务同时进行时,实质上形 ...

  6. angularjs异步处理 $q.defer()

    看别人的项目中有用到 var def = $q.defer()返回一个deferred异步对象def 当代码逻辑遇到 def.resolve(rtns); deferred状态为执行成功,返回rtns ...

  7. 异步编程的类型系统：promise & future & closure & observable----异步编程类型的结构和操作

    异步编程类型的结构和操作. 上下文维护. A promise represents the eventual result of an asynchronous operation. The prim ...

  8. 将已经存在的异步请求callback转换为同步promise

    由于js是单线程执行,为防止阻塞,会有很多异步回调函数callback,嵌套层次多了,可读性就差了很多.随着社区的发展,出现了promise.我们来将一些常见的回调函数做修改,变成promise的链式 ...

  9. [AngularJS] Angular 1.3 new $q constructor

    <!DOCTYPE html> <html ng-app="app"> <head lang="en"> <meta ...

随机推荐

  1. Go 安装 sqlite3驱动报错

    问题:最近在使用Go做一个博客示例,在使用go get 安装 sqlIite3的驱动遇到下面的问题(cc1.exe: sorry, unimplemented: 64-bit mode not com ...

  2. 雷林鹏分享：jQuery EasyUI 数据网格 - 创建属性网格

    jQuery EasyUI 数据网格 - 创建属性网格 属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建 ...

  3. android -------- 获取手机设备信息

    最近在开发中,需要用到一些系统信息,总结了一下 /** * Created by zhangqie on 2019/2/26 * Describe: 系统工具类 */ public class Equ ...

  4. 实现android"转盘抽奖"小项目后感想

    我这次做的小项目是android的转盘抽奖,因为这个小项目中有进程的调度,加锁等细节,而我们组的竞赛系统中也有这样的问题.通过这次的实践我发现了自己的好多问题也学到了很多. 个人问题: 1.自己的动手 ...

  5. Regex-Golf

    A man, a plan: 判断回文,如果不确定串长度情况下可以考虑利用反向引用构造pattern,例如: (.)\1  , (.)(.)\2\1 , (.)(.)(.)\3\2\1 ...但这里只 ...

  6. .NET学习日记【1】

    不得不说,之前一年学习的内容基本上在第一章中都有所涉及,而且还讲了很多不知道知识.看完第一张对多态和继承都多了一些体会.在1.4前面的都有很认证的看过,也在vs上面验证了一下.然后也明白了.NET到底 ...

  7. hdu多校第3场A.Ascending Rating

    Problem A. Ascending Rating Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Sub ...

  8. 【lintcode17/18】Subset, SubsetII

    题目:给定一个含不同整数的集合,返回其所有的子集. 样例:如果 S = [1,2,3],有如下的解:[[3],[1],[2],[1,2,3],[1,3],[1,2],[2,3],[]] 思路:因为此题 ...

  9. 201621123075 Week03-面向对象入门

    1.本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识点组织起来.请使用工具画出本周学习到的知识点及知识点之间的联系.步骤如下: 1.1 写出你认 ...

  10. 19_04_02校内训练[deadline]

    题意 给出一个二分图,左边为A集合,右边为B集合,要求把A集合中每一个点染为黑白两色中的一种,B集合中的颜色已定.染色后对于原本相邻且颜色相同的点,建立新的二分图,即得到了两个新的二分图,它们是独立的 ...