AngularJS Promise

前端之家收集整理的这篇文章主要介绍了AngularJS Promise前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

场景:

前端JS 异步,嵌套层次太多,维护时 无比痛苦(去年做的一个系统项目,现在回想起来,那时候够耐心的,那么多嵌套,搞的逻辑复杂多端)

诸如以下现象:

function(arg1,arg2,function(){
    function(arg1,function(){
        function(arg1,function(){
             ......
        })
    })   
})


解决法子:


Promise是一个接口,它用来处理的对象具有这样的特点:在未来某一时刻(主要是异步调用)会从服务端返回或者被填充属性。其核心是,promise是一个带有then()函数的对象。

q服务是AngularJS中自己封装实现的一种Promise实现,相对与Kris Kwal's Q要轻量级的多。
先介绍一下$q常用的几个方法

  • defer() 创建一个deferred对象,这个对象可以执行几个常用的方法,比如resolve,reject,notify等
  • all() 传入Promise的数组,批量执行,返回一个promise对象
  • when() 传入一个不确定的参数,如果符合Promise标准,就返回一个promise对象

语法:

var deferred = $q.defer();
var promise = deferred.promise;

// assign behavior before resolving
promise.then(function (data) {
  console.log('before:',data);
});

deferred.resolve('done ');

多个 function 异步执行:
defer
.then(a,b)
.then(a,b)
.catch()
.finally()


all()的用法

可以把多个primise的数组合并成一个。当所有的promise执行成功后,会执行后面的回调。回调中的参数,是每个promise执行的结果。
当批量的执行某些方法时,就可以使用这个方法

function PromiseCtrl($scope,$q,$timeout) {
    // Our promise function with its delay as argument
    var getPromise = function(delay) {
        // Creates a Deferred object
        var deferred = $q.defer();
                       
        $timeout(function() {
            // Resolve the promise at the end of the delay if said delay was > 0
            if(delay > 0) {
                deferred.resolve("Success");
            } else {
                deferred.reject("Fail");
            }
        },delay);
        
        // The promise of the deferred task
        return deferred.promise;
    };
    
    // Init
    $scope.result = "Waiting";
    
    /*
	 * Combines multiple promises into a single promise
     * that will be resolved when all of the input promises are resolved
	 */
    $q.all([
            getPromise(1000),getPromise(2000),getPromise(3000) // <--- Try something less than 0
        ]).then(function(value) {
        // Success callback where value is an array containing the success values
        $scope.result = value;       
    },function(reason) {
        // Error callback where reason is the value of the first rejected promise
        $scope.result = reason;
    });
}

猜你在找的Angularjs相关文章