[AngularJS] AngularJS系列进阶篇之promise

使用promise
then链
扩展

在上节中,我们在http中使用了then 和在ngResource中返回了一个'延迟对象'.

本节介绍一下angular中的promise.

我觉得可以把js中的promise比作c#中的Task 的await 以同步的时候实现回调.

使用promise

HTML

  <input type="checkbox" ng-model="flag" />  <button ng-click="func()">Test</button>

Controller

['$scope', '$q', function (scope, q) {      scope.func = function () {        var defer = q.defer();//创建1个延迟加载对象 或 新建1个工作单元        var promise = defer.promise;//defer对象的核心 含有回调函数的句柄        promise.then(function (data) {          var msg = '成功:' + data;          console.log(msg);        }, function (data) {          var msg = '失败:' + data;          console.log(msg);        }, function (data) {          var msg = '通知:' + data;          console.log(msg);        });        defer.notify('开始执行');        scope.flag ? defer.resolve('选中') : defer.reject('未选中');      }
}]

点击按钮:

到这里我们可以了解一下$q的defer()方法创建的对象具有哪些方法

resolve(value)：用来执行deferred promise，value可以为字符串，对象等。
reject(value)：用来拒绝deferred promise，value可以为字符串，对象等。
notify(value)：获取deferred promise的执行状态，然后使用这个函数来传递它。
then(successFunc, errorFunc, notifyFunc)：无论promise是成功了还是失败了，当结果可用之后，then都会立刻异步调用successFunc，或者'errorFunc'，在promise被执行或者拒绝之前，notifyFunc可能会被调用0到多次，以提供过程状态的提示。
catch(errorFunc)
finally(callback)

then链

我们稍微改了下上面的代码(这段代码是残缺的,只定义了success方法)

      scope.func2 = function () {        var defer = q.defer();        var promise = defer.promise;        promise.then(function (data) {          var msg = '成功:' + data;          return msg;        }).then(function (data) {          console.log(data);        });        defer.notify('开始执行');        scope.flag ? defer.resolve('选中') : defer.reject('未选中');      }

这里为了说明then函数和reject函数.我们看下demo

        promise.then(function (data) {          var msg = '成功:' + data;          return msg;        }, function (data) {          var msg = '失败:' + data;          return msg;        }).then(function (data) {          console.log(data);        }, function (erro) {          console.log('erro:' + erro);        });

这里为了区别在第二个then的erro函数中加了erro前缀

我们发现不会调用到此方法.

修改一下promise后:

        promise.then(function (data) {          var msg = '成功:' + data;          return msg;        }).then(function (data) {          console.log(data);        }, function (erro) {          console.log('erro:' + erro);        });

也可以返回promise

        promise.then(function () {          var thenDefer = q.defer();          $timeout(function () {            if (scope.flag)              thenDefer.resolve('done success');            thenDefer.reject('done faild');          }, 1000);          return thenDefer.promise;        }).then(function (data) {          console.log(data);        }, function (erro) {          console.log('erro:' + erro);        });