angularjs1系のpromiseの使い方について

aという非同期処理をしたら、
bという非同期処理をして
cという非同期処理中に再帰関数呼び出したりしたのち、
dという非同期処理をしたいです。

これをネストしていくと大変なので、
promise使って、順番に処理したいです。

以下、サンプルを作ってみたのですが、
結果は、

１回目のアラートが表示され「1 入力値が空です」と表示されます。
２回目のアラートが表示され「undefined」と表示されます。

どのようにしたら、順番に非同期処理実行できますでしょうか。
処理の順番はa->b->c->dという順に処理したいです。
どうぞよろしくお願い致します。

html
1<div ng-app="appName" ng-controller="MainCtrl">
2</div>

javascript
1    <script type="text/javascript">
2
3    (function () {
4        angular.module('appName', [], function() {});
5        angular.module('appName').controller('MainCtrl', function($scope, $q, $timeout) {
6
7            var f1 = function(val){
8                var deferred = $q.defer();
9
10                setTimeout(function(val){
11                    if (val) {
12                        deferred.resolve('1 入力値が'+val);
13                    } else {
14                        deferred.reject('1 入力値が空です');
15                    }
16                }, 2000);
17
18                return deferred.promise;
19            };
20
21            var f2 = function(val){
22                var deferred = $q.defer();
23
24                setTimeout(function(val){
25                    if (val) {
26                        deferred.resolve('2 入力値が'+val);
27                    } else {
28                        deferred.reject('2 入力値が空です');
29                    }
30                }, 2000);
31
32                return deferred.promise;
33            };
34
35            var f3 = function(val){
36                var deferred = $q.defer();
37
38                setTimeout(function(val){
39                    if (val) {
40                        deferred.resolve('2 入力値が'+val);
41                    } else {
42                        deferred.reject('2 入力値が空です');
43                    }
44                }, 2000);
45
46                return deferred.promise;
47            };
48
49            f1('aaa')
50                .then(
51                    function(o_resolve) {
52                        alert(o_resolve);
53                        f2('bbb');
54                    },
55                    function(o_reject) {
56                        alert(o_reject);
57                    }
58                )
59                .then(
60                    function(o_resolve) {
61                        alert(o_resolve);
62                        f3('ccc');
63                    },
64                    function(o_reject) {
65                        alert(o_reject);
66                    }
67                );
68
69
70
71        });
72    }());
73
74    </script>

行動規範の内容に同意します

回答1件

ベストアンサー

thenの中身でreturnして下さい。

リンク先でRunボタンをクリックして下さい

javascript
1angular.module('appName', [], function() {});
2angular.module('appName').controller('MainCtrl', function($scope, $q, $timeout) {
3	var f1 = function(val){
4  	var deferred = $q.defer();
5		$timeout(function(){
6    	if (val) {
7      	deferred.resolve('1 入力値が'+val);
8      } else {
9      	deferred.reject('1 入力値が空です');
10      }
11    }, 2000);
12    return deferred.promise;
13  };
14	var f2 = function(val){
15  	var deferred = $q.defer();
16		$timeout(function(){
17    	if (val) {
18      	deferred.resolve('2 入力値が'+val);
19      } else {
20      	deferred.reject('2 入力値が空です');
21      }
22    }, 2000);
23    return deferred.promise;
24  };
25	var f3 = function(val){
26  	var deferred = $q.defer();
27		$timeout(function(){
28    	if (val) {
29      	deferred.resolve('3 入力値が'+val);
30      } else {
31      	deferred.reject('3 入力値が空です');
32      }
33    }, 2000);
34    return deferred.promise;
35  };
36  f1('aaa').then(function(o_resolve){
37  	alert(o_resolve);
38    return f2('bbb');
39  }).then(function(o_resolve){
40  	alert(o_resolve);
41    return f3('ccc');
42  }).then(function(o_resolve){
43  	alert(o_resolve);
44  });
45});