jQuery の Deferred や when / then による同期的な処理の後の `return` を返す方法

Question

前提・実現したいこと

jQuery で以下のような
API【A】へリクエスト、そのレスポンス値を使って
API【B】へリクエスト、そのレスポンス値を使って
オブジェクトに格納し、 return でデータを渡せるようなものを書いています。

jQuery の Deferred や when / then による同期的な記述をしていますが
以下の記述だと、最終的な return が同期的に返せておらず、
どの記述が良いか、ご教授、アドバイスをいただけると嬉しいです。

発生している問題・エラーメッセージ

該当のソースコードの ※ の部分が同期的に return が取れず困っている箇所です。

該当のソースコード

$(function() {

  'use strict';

  function parent () {

    // 最終的に `parent` を外のjsから実行した時の return に利用したい
    var result = [];

    // childBの処理で利用したい配列。中身はchildAで作成する
    var useB = [];

    // APIのURL
    var jsonA = 'https://www.hoge.jp/apiA.php';
    var jsonB = 'https://www.hoge.jp/apiB.php';

    function childA () {

      // 同期を取るため延期させるDeferredオブジェクト作成
      var d = new $.Deferred();

      // Ajax
      $.ajax({
        url: jsonpA,
        dataType: 'jsonp',
        jsonpCallback: 'jsonpA',
        cache : true,
      })
      .then( function( res ) {

        // 取ってきたマニュアル jsonp を eachで回して
        $( res ).each( function (index, el) {

            // childBで利用するためのデータを格納
            useB.push({ el.hoge });

        });

        useB = useB.join();

        // Deferred 延期の解決
        d.resolve();

      });

      // プロミス作ってDeferredを返す
      return d.promise();

    }

    function childB () {

      // 同期を取るため延期させるDeferredオブジェクト作成
      var d = new $.Deferred();
      // Ajax
      $.ajax({
        url           : jsonB,
        dataType      : 'jsonp',
        jsonpCallback : 'jsonB',
        cache         : true,
      })
      .then( function ( res ) {

        // ここで 最終的に return で利用したいデータを蓄積する
        $( useB ).each( function (index, el) {

          // 足していく
          result.push({
            'test01' : el.element01,
            'test02' : el.element02
          });

        });

        // Deferred 延期の解決
        d.resolve();

      });

      // プロミス作ってDeferredを返す
      return d.promise();

    }

    // childAを実行してchildBを実行
    $.when(

      childA()

    )
    .then(childB)

    // ※ ここに書いても結局 when then を待たず時実行される。。同期的ではない
    return result;

  }

  // windowオブジェクトに追加して外部jsから呼び出せるようにする
  window.parent = parent();

});

これを読み込んだ後に別のjs（またはhtml上で）で parent として呼び出して利用しています。

試したこと

上記だと、 $when / then から外れた所で return を書いているので同期的にならないと考え以下のように記述したのですが、
その場合、 function parent の return としては扱われないので、困りました。

$(function() {

  'use strict';

  function parent () {

    // 最終的に `parent` を外のjsから実行した時の return に利用したい
    var result = [];

    // childBの処理で利用したい配列。中身はchildAで作成する
    var useB = [];

    // APIのURL
    var jsonA = 'https://www.hoge.jp/apiA.php';
    var jsonB = 'https://www.hoge.jp/apiB.php';

    function childA () {

      // 同期を取るため延期させるDeferredオブジェクト作成
      var d = new $.Deferred();

      // Ajax
      $.ajax({
        url: jsonpA,
        dataType: 'jsonp',
        jsonpCallback: 'jsonpA',
        cache : true,
      })
      .then( function( res ) {

        // 取ってきたマニュアル jsonp を eachで回して
        $( res ).each( function (index, el) {

            // childBで利用するためのデータを格納
            useB.push({ el.hoge });

        });

        useB = useB.join();

        // Deferred 延期の解決
        d.resolve();

      });

      // プロミス作ってDeferredを返す
      return d.promise();

    }

    function childB () {

      // 同期を取るため延期させるDeferredオブジェクト作成
      var d = new $.Deferred();
      // Ajax
      $.ajax({
        url           : jsonB,
        dataType      : 'jsonp',
        jsonpCallback : 'jsonB',
        cache         : true,
      })
      .then( function ( res ) {

        // ここで 最終的に return で利用したいデータを蓄積する
        $( useB ).each( function (index, el) {

          // 足していく
          result.push({
            'test01' : el.element01,
            'test02' : el.element02
          });

        });

        // Deferred 延期の解決
        d.resolve();

      });

      // プロミス作ってDeferredを返す
      return d.promise();

    }

    // childAを実行してchildBを実行
    $.when(

      childA()

    )
    .then(childB)
    .then(function(){
      // ※ ここで return させても `parent` の return としては扱われない。。
      return result;
    })

  }

  // windowオブジェクトに追加して外部jsから呼び出せるようにする
  window.parent = parent();

});

どうぞよろしくお願いします。

Answer 1

同期を取りたいparentでpromiseの終了を待つ必要があると思います。

childBのpromiseをreturnして、parent側で、戻されたpromiseに対して.thenする感じで、処理できませんか？

追記

若干怪しいところがあるかもしれませんが・・・
概ねこんなイメージでしょうか？

（説明に不要と思った部分は、オリジナルソースから省略しました）

  function parent () {
    // parentのDeferredオブジェクト作成
    var parent_dfd = new $.Deferred();

    // 最終的に `parent` を外のjsから実行した時の return に利用したい
    var result = [];

    function childA () {

      var d = new $.Deferred();

      // Ajax
      $.ajax({
        url: jsonpA,
      })
      .then( function( res ) {
        ...

        d.resolve();
      });

      return d.promise();

    }

    function childB () {

      // Ajax
      $.ajax({
        url: jsonpB,
      })
      .then( function ( res ) {

        $( useB ).each( function (index, el) {

          result.push({
            'test01' : el.element01,
            'test02' : el.element02
          });

        });

        // parentのDeferredを解決
        parent_dfd.resolve(result);

      });
    }

    childA()
    .then(childB);
 
    return parent_dfd.promise();
  }

  // windowオブジェクトに追加して外部jsから呼び出せるようにする
  window.parent = parent();

});

以下、呼び出し側

  parent().then(function (result) {
    //resultの処理
  });

Comments

[yasshcy]

ありがとうございます。

> 同期を取りたいparentでpromiseの終了を待つ必要があると思います。
確かに、今parentの処理では Deferred の作成と prromise は持っていないです。

> childBのpromiseをreturnして、
今、childB で `return d.promise();` となっている所で `promise` せず `return` をして

> parent側で、戻されたpromiseに対して.thenする感じ、処理できませんか？
こういう感じでしょうか。

```
// childAを実行してchildBを実行
$.when(

childA()

)
.then(
childB,
function () {
return d.promise();
}
)
```

うまくは行きませんでしたが、
> parent側で、戻されたpromiseに対して.thenする感じ
がイマイチピンときませんでした。。すみません。

[Meganezaru]

すいません、parentの定義をあやふやにしてました。

私がparentと示したのは、parentの呼び出し側のことでしたが、
よくよく考えたら、私の知識では、childBのpromiseをparentのreturnとして返す方法が、見つけられませんでした(>_<)

おっしゃる通り、parentにdeferredを作成して、promiseをreturnし、childBの中で、そのdeferredをresolveするイメージになると思います。その場合、childBのdeferredは不要だと思います。

のちほど、回答に追記します。

Answer 2

jsonpなのですからコールバックのjsonpAからjsonpBを呼ぶだけでは？

sample

<script>
$(function(){
  $('#btn').on('click',function(){
    $.ajax({
    url: 'ajax.php',
    data:{"id":1},
    dataType: 'jsonp',
    jsonpCallback: 'jsonpA',
    cache : true,
    });
  });
});
function jsonpA(data){
  data.id=data.id+"23";
  $.ajax({
    url: 'ajax.php',
    data:data,
    dataType: 'jsonp',
    jsonpCallback: 'jsonpB',
    cache : true,
    });
}
function jsonpB(data){
  console.log(data);
}
</script>
<input type="button" id="btn" value="test">

• ajax.php

<?PHP
$callback=filter_input(INPUT_GET,"callback");
if(is_null($callback)) $callback="void";
$id=filter_input(INPUT_GET,"id");
$data=["id"=>$id];
header("Content-Type:application/javascript");
print "{$callback}(".json_encode($data).");";
?>

Comments

[yasshcy]

ありがとうございます。

このcallbackを自由に決めてよければ、この方法がsimpleかもしれませんね。
ただ、今回webAPIの仕様上、jsonp取得のcallbackは指定されていているので
今回のケースでは適用できなさそうです。

[yambejp]

> callbackを自由に決めてよければ

ごめんなさい、意味がわかりません
ご自身が例示したsample自体にコールバック関数名を指定していますよね？
jsonpなのに指定したコールバック名でデータを返してくれないのでしょうか？

[yasshcy]

説明が足らず申し訳ありません。
そしてレスが遅くて申しわけありません。。

> ご自身が例示したsample自体にコールバック関数名を指定していますよね？
はい、sampleに `jsonpCallback: 'jsonpA',` とコールバック関数を指定しています。

> jsonpなのに指定したコールバック名でデータを返してくれないのでしょうか？
webAPIは別途、他の人が用意したものなのですが、これに問い合わせると以下のような形でレスポンスが返ってきます。

```
jsonpA({
"list": [
{
"property1": "value1",
"property2": "value2"
}
]
})
```

上記の `jsonpA` は js側で指定している
`jsonpCallback: 'jsonpA',` の値と一致していなければならないと、思っています。
これはwebAPI(php)側で指定されているので、変更できない、という意味で申し上げました。

[yambejp]

だから、jsonpでjsonpAの引数でjsonデータが返るわけですから
私が最初に提示したとおりの処理でよいのでは？
jsonpAはユーザー関数を用意してくださいという意味ですから

Answer 3

コールバックでよかったら引数つけて呼べばいいのでは？未検証ですが

function parent (cb) {

    .then(childB)
    .then(function(){
      // ※ ここで return させても `parent` の return としては扱われない。。
      //return result;
      cb(result);
    })

呼び出し

    window.parent(function(result){
        // result使って処理
    })

Comments

[yasshcy]

ありがとうございます。

呼び出しの引数を `result` => `cb` に変更した所、

# 呼び出し

```
window.parent(function(cb){
// result使って処理
})
```

ちゃんと処理を待ってくれました。
callbackでの順番待ちはうまく行きました。ありがとうございます。

ただ、これはもともとの私の構造が悪いのかもしれませんが、
今回全体を

```
$(function() {
function parent () {
〜 略 〜
}
});
```

で囲ったものを、外から実行できるようにする必要があったので、

外から実行した際に `undefined` になりオブジェクトが受け取れませんでした。

もしかしたら、即時関数で囲うこと自体がナンセンスかもしれませんね。。