Created
March 23, 2016 03:13
-
-
Save fj-auto/9aef7674f63a3c200521 to your computer and use it in GitHub Desktop.
angularJS $q Promise
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body ng-app="app"> | |
| <div ng-controller="mainController"> | |
| {{ myValue }} | |
| <hr> | |
| {{step}} | |
| </div> | |
| <script id="jsbin-javascript"> | |
| angular.module('app', []) | |
| .controller('mainController', ['$scope', '$q', function($scope, $q) { | |
| $scope.addOne = function(num) { | |
| var q = $q.defer(); | |
| $scope.step++; | |
| if (angular.isNumber(num)) { | |
| // true | |
| // q.resolve(num+1); | |
| setTimeout(function() {q.resolve(num+1);}, 1000); | |
| } else { | |
| // false | |
| q.reject('NaN'); | |
| } | |
| return q.promise; | |
| }; | |
| $scope.step = 0; | |
| $scope.myValue = 0; | |
| $scope.promise = $scope.addOne($scope.myValue); | |
| // $scope.promise | |
| // .then(function(result) { | |
| // $scope.myValue = result; | |
| // console.log(result); | |
| // },function(err) { | |
| // console.log('error here!'); | |
| // }); | |
| /** | |
| // promise 很好的地方在它可以chain | |
| $scope.promise | |
| // do chaining 需要return 'promise object' 给下一个chain | |
| .then(function(result) { | |
| // $scope.myValue = result; | |
| //需要return 'promise object' 给下一个chain | |
| return $scope.addOne(result); | |
| },function(err) { | |
| console.log('error here!'); | |
| }) | |
| // do chaining 需要return 'promise object' 给下一个chain | |
| .then(function(result) { | |
| // $scope.myValue = result; | |
| //需要return 'promise object' 给下一个chain | |
| return $scope.addOne(result); | |
| },function(err) { | |
| console.log('error here!'); | |
| }) | |
| // 最后一个chaining，不需要return 'promise object' 给下一个chain了 | |
| .then(function(result) { | |
| $scope.myValue = result; | |
| console.log(result); | |
| },function(err) { | |
| console.log('error here!'); | |
| }); | |
| **/ | |
| // 没必要在每个chain做error监听 | |
| $scope.promise | |
| .then(function(result) {return $scope.addOne(result);}) | |
| .then(function(result) {return $scope.addOne(result);}) | |
| // 注意：这一步出错了，后面的chain不会继续，这里就直接做error处理了 | |
| .then(function(result) {return $scope.addOne('result');}) | |
| .then(function(result) {return $scope.addOne(result);}) | |
| .then(function(result) {return $scope.addOne(result);}) | |
| .then( | |
| function(result) {$scope.myValue = result;}, | |
| function(err) {$scope.myValue = err;} | |
| ); | |
| }]); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">angular.module('app', []) | |
| .controller('mainController', ['$scope', '$q', function($scope, $q) { | |
| $scope.addOne = function(num) { | |
| var q = $q.defer(); | |
| $scope.step++; | |
| if (angular.isNumber(num)) { | |
| // true | |
| // q.resolve(num+1); | |
| setTimeout(function() {q.resolve(num+1);}, 1000); | |
| } else { | |
| // false | |
| q.reject('NaN'); | |
| } | |
| return q.promise; | |
| }; | |
| $scope.step = 0; | |
| $scope.myValue = 0; | |
| $scope.promise = $scope.addOne($scope.myValue); | |
| // $scope.promise | |
| // .then(function(result) { | |
| // $scope.myValue = result; | |
| // console.log(result); | |
| // },function(err) { | |
| // console.log('error here!'); | |
| // }); | |
| /** | |
| // promise 很好的地方在它可以chain | |
| $scope.promise | |
| // do chaining 需要return 'promise object' 给下一个chain | |
| .then(function(result) { | |
| // $scope.myValue = result; | |
| //需要return 'promise object' 给下一个chain | |
| return $scope.addOne(result); | |
| },function(err) { | |
| console.log('error here!'); | |
| }) | |
| // do chaining 需要return 'promise object' 给下一个chain | |
| .then(function(result) { | |
| // $scope.myValue = result; | |
| //需要return 'promise object' 给下一个chain | |
| return $scope.addOne(result); | |
| },function(err) { | |
| console.log('error here!'); | |
| }) | |
| // 最后一个chaining，不需要return 'promise object' 给下一个chain了 | |
| .then(function(result) { | |
| $scope.myValue = result; | |
| console.log(result); | |
| },function(err) { | |
| console.log('error here!'); | |
| }); | |
| **/ | |
| // 没必要在每个chain做error监听 | |
| $scope.promise | |
| .then(function(result) {return $scope.addOne(result);}) | |
| .then(function(result) {return $scope.addOne(result);}) | |
| // 注意：这一步出错了，后面的chain不会继续，这里就直接做error处理了 | |
| .then(function(result) {return $scope.addOne('result');}) | |
| .then(function(result) {return $scope.addOne(result);}) | |
| .then(function(result) {return $scope.addOne(result);}) | |
| .then( | |
| function(result) {$scope.myValue = result;}, | |
| function(err) {$scope.myValue = err;} | |
| ); | |
| }]);</script></body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment