angular中的promise用法

标签（空格分隔）： angular

前言

Promise其实是一个规范，用类似then().then()这样的链式调用形式来处理因为异步带来意大利面条式的代码（多层函数嵌套）。
多层函数嵌套的原因是，因为js的异步特性，导致我们后面函数需要用到这个异步函数获取的数据或者结果时，必须要等异步函数处理完成。所以必须写在这个异步函数结尾。

Angular中的promise:$q

Angular把promise封装成了一个服务$q方便我们到处使用它。

当我们用console.log打印$q时，我们发现它是一个函数。实际还是封装了deferred对象。

var $Q = function Q(resolver) {
    if (!isFunction(resolver)) {
      throw $qMinErr('norslvr', "Expected resolverFn, got '{0}'", resolver);
    }

    var deferred = new Deferred();

    function resolveFn(value) {
      deferred.resolve(value);
    }

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

    resolver(resolveFn, rejectFn);

    return deferred.promise;
  };

然后我们console.log一下$q.defer()这个对象，发现控制台给我们一个Deferred对象,具体有以下方法

notify：用于通知then(),异步函数处理进度
promise：在处理做完notify，reject，或者resolve时，存储信息，然后作为一个promise对象返回
reject：数据获取失败，或处理函数出错，返回error原因
resolve：数据获取成功，返回正确的数据

使用$q方法：

  • $q是可以用在同步过程中的，我们先看在同步过程中的应用：
var app = angular.module('app',[]);
app.controller('MyCtrl',['$q','$scope'，'$timeout',function($scope,$q,$timeout){
    var defer = $q.defer();
    defer.resolve('data');
    defer.reject('error');
    defer.promise.then(function(data){
        console.log(data);//成功时显示data
    },function(error){
        console.log(error);//失败显示error
    })
}])

promise是一种模式，也适用于同步方式

  • 异步方式
var app = angular.module('app', []);
	app.controller('MyCtrl', ['$scope', '$q', '$timeout' ,function ($scope,$q,$timeout) {
		function async(sex){
			var defer = $q.defer();
		$timeout(function () {
				 
				defer.notify("查询性别中");
				if (sex == 'male') {
					defer.resolve(sex);
				}else {
					defer.reject(sex);
				}
			
			},2000);
			return defer.promise;
		}
		var sex = 'male';
		var promise = async(sex);
		promise.then(function (data) {
			console.log(data);
		}, function (error) {
			console.log(error);
		},function (notify) {
			console.log(notify);
		});
	}]);

我们在这里通过$timoue模拟异步，然后返回defer.promise。通过操作这个返回的promise给下个then函数使用。

其他方法

$q还有其他的方法，比如when，all，finally。
when:传递一个值
all：传递多个promise，必须全部执行成功，然后才能执行回调。
finally：是和then方法对应的函数，是所有的then执行完之后，然后执行他，无论成功失败，都会被执行。

这里在使用all时，需要在注意，每个defer只能传递一个值，resolve或者reject只能一个。需要用多个defer才能传递多个。
而且resolve是没有返回值的。

var app = angular.module('app', []);
	app.controller('MyCtrl', ['$scope', '$q', '$timeout' ,function ($scope,$q,$timeout) {
		var a = $q.defer();
		var b = $q.defer();
		var c = $q.defer();
		a.resolve('a');
		b.resolve('b');
		c.resolve('c');
		$q.all([a.promise,b.promise,c.promise]).then(function (data) {
			console.log(data);
		}, function (error) {
			console.log(error);
		});
	}]);//如果把这里的all编程when，那么后面的data就不是一个数组，而是一组promise，when是原值传递