ajaxの直列処理内でresolve()関数に引き渡した値を取得できない

Question

Ajaxの勉強中にDeferredを用いることで直列処理が可能になり、ajaxの戻り値にはDeferredが含まれていることを知りました。
そこで、次のような処理を試してみたのですが期待する動作は得られませんでした。

hoge1のAjax処理後にhoge2を実行し、最終的に何かしらメッセージを画面に表示するという処理です。
ここでalways()で表示するためのメッセージを直前のresolve()で渡しているのにもかかわらず、always()に受け渡されるのはjqXHRオブジェクトのためメッセージを表示することができません。

どのように修正したら良いかご教授いただければ幸いです。

追記

やりたいこととしては、hoge2が取得したデータをalwaysで表示したいです。
ただしhoge2がデータの取得を行うためにはhoge1で取得したデータが必要です。
また、hoge1、hoge2は実際にはajaxでwebサーバに業務ロジックを依頼し、業務ロジックの成功可否をajaxのデータに値を返します。

ここで、hoge1もしくはhoge2でajaxの通信エラーやタイムアウトなどのエラーが発生した場合はalwaysで表示するメッセージをfailで設定します。
また、hoge1もしくはhoge2で依頼した業務ロジックの成功可否をifで判定します。
失敗だった場合はifブロックの中でalwaysに表示するメッセージを設定した後、処理を以降の処理を中断し、alwaysを実行させています。

なので、結果的にalwaysで表示されるのは、下のいずれかだと思うのですが、Ajaxのエラーのみ正しく表示されます。
なので、期待通りであれば下記のメッセージが表示されます。
・hoge2がajaxで取得したデータ
・「Ajaxエラー」
・「hoge1の業務ロジックエラー」
・「hoge2の業務ロジックエラー」

function btnOnClick() {
    hoge1()
        .then(function (data, status, xhr) {
            var def = new $.Deferred();

            if (!data) {

                // do something
                
                def.resolve('hoge1の業務ロジックエラー');
                return def.promise();
            }

            // do something

            return hoge2(data)
                .then(function (data, status, xhr) {
                    var def = new $.Deferred();

                    if (!data) {

                        // do something
                        
                        def.resolve('hoge2の業務ロジックエラー');
                        return def.promise();
                    }

                    // do something

                    def.resolve(data);
                    return def.promise();
                });
        }).fail(function (xhr, status, errorThrown) {
            var def = new $.Deferred();
            def.resolve('Ajaxエラー' + status);
            return def.promise();
        }).always(function (message) {
            alert(message);
        });
}

var hoge1 = function () {
    return $.ajax({
        url: './hoge1.html',
        timeout: 1000
    });
}

var hoge2 = function (data) {
    return $.ajax({
        url: './hoge2.html',
        timeout: 1000,
        data: data
    });
}

補足情報（FW/ツールのバージョンなど）

IE11
ECMAScript 5
jquery-2.2.4

Comments

[yambejp]

結局なにをしたいのかよくわかりません。hoge1はajaxでデータを受け取ってまず表示、それを待ってhoge2はajaxでデータを受けとる？その上でhoge1のalways処理をしたい？

[sakata_inu]

ご質問ありがとうございます。説明が足りず申し訳ありません。本文のほうに説明を追記しましたのでご確認頂ければ幸いです。

Answer 1

ほぼ丸っとコピーします。
見た感じ正しく表示されているように見えますが、なにか違うのでしょうか？

• send.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  hoge1()
    .then(function (data) {
      var def = new $.Deferred();
      if (!data) {
        def.resolve('hoge1の業務ロジックエラー');
        return def.promise();
      }
      return hoge2(data)
        .then(function (data) {
          var def = new $.Deferred();
          if (!data) {
            def.resolve('hoge2の業務ロジックエラー');
            return def.promise();
          }
          def.resolve(data);
          return def.promise();
        });
    }).fail(function (xhr,status) {
      console.log('Ajaxエラー' + status);
    }).always(function (data) {
      console.log(data);
    });
});

var hoge1 = function () {
  return $.ajax({
  url: 'recv.php',
  data:{a:1,b:1},
  timeout: 1000,
  });
}

var hoge2 = function (data) {
  return $.ajax({
  url: 'recv.php',
  data: {a:parseInt(data)+2,b:2},
  timeout: 1000,
  });
}
</script>

recv.phpが普通に動作する場合

<?PHP
print $_GET["a"]*100;
?>

結果：10200
hoge1で1を投げて100倍したものが返り、hogeで2を足して100倍したものが返る

recv.phpがhoge1を弾く場合

<?PHP
if($_GET["b"]!="1") print $_GET["a"]*100;
?>

結果：hoge1の業務ロジックエラー
hoge1で渡した$_GET["b"]が1なので出力がない

recv.phpがhoge2を弾く場合

<?PHP
if($_GET["b"]!="2") print $_GET["a"]*100;
?>

結果：hoge2の業務ロジックエラー
hoge2で渡した$_GET["b"]が2なので出力がない

recv.phpがtimeoutする

<?PHP
sleep(2);//2秒とめる
print $_GET["a"]*100;
?>

結果：Ajaxエラーtimeout（failで表示）
その後alwaysではfailと同じ戻りがあるのでconsoleにはエラーを戻すobjectが表示

Comments

[sakata_inu]

回答ありがとうございます。仰るとおり私のコードでもthen内を通る場合は正常にメッセージが表示されました。一点ご質問があるのですがajaxエラーの場合にfailからalwaysに値を渡すためにはfail内でdeferredインスタンスを生成し、resoleveに値を設定した後にpromiseを返すという方法でよいのでしょうか。