どの部分が前回の非同期通信なのか

Question

下記の引用は、ブレイクスルーjavascript初版96頁に記述されているものを一部抜粋したものです。

〇Promise/Deferredを使った非同期通信

javascriptにおける非同期通信は、昨今のwebアプリケーションの進化を大きくけん引してきたといっても過言ではありません。しかし、その便利さとは裏腹に、非同期通信で受け取ったレスポンスをコールバックで処理するというシステムは時に複雑を極めます。
次のコードは、「asyncFuncA >asyncFuncB >asyncFuncCの順に、前回の非同期通信完了を待ってから実行する」という処理の例です。

asyncFuncA (function(a){
  asyncFuncB (function(b){
    asyncFuncC(function(c){
      console.log(c);
    },function(error){
      console.log(error);
    })
  },function(error){
    console.log(error);
  })
},function(error){
  console.log(error);
})

ここで疑問なのですが、書籍の言う前回の非同期通信というのは、ソース中のどれなのでしょうか。

試したソース

let asyncFuncA = function(qqq,eee) {
  //qqqは、入れ子になっているほうの関数
  qqq("asyncFuncA関数の仮引数であるqqq関数を実行");
  eee("asyncFuncA関数の仮引数であるeee関数を実行");
  console.log("qqq-a:",qqq,"eee-a:",eee);
};
let asyncFuncB = function(qqq,eee) {
  qqq("asyncFuncB関数の仮引数であるqqq関数を実行");
  eee("asyncFuncB関数の仮引数であるeee関数を実行");
  console.log("qqq-b:",qqq,"eee-b:",eee);
};
let asyncFuncC = function(qqq,eee) {
  qqq("asyncFuncC関数の仮引数であるqqq関数を実行");
  eee("asyncFuncC関数の仮引数であるeee関数を実行");
  console.log("qqq-c:",qqq,"eee-c:",eee);
};

asyncFuncA(function(a){
  console.log("実引数a",a);
  asyncFuncB(function(b){
    console.log("実引数b",b);
    asyncFuncC(function(c){
      console.log("実引数c",c);
    },function(error){
      console.log("実引数error-c",error);
    });
  },function(error){
    console.log("実引数-error-b",error);
  });
},function(error){
  console.log("実引数error-a",error);
});

https://ja.stackoverflow.com/questions/47216/%E3%81%A9%E3%81%AE%E9%83%A8%E5%88%86%E3%81%8C%E5%89%8D%E5%9B%9E%E3%81%AE%E9%9D%9E%E5%90%8C%E6%9C%9F%E9%80%9A%E4%BF%A1%E3%81%AA%E3%81%AE%E3%81%8B

Comments

[think49]

マルチポスト時のルールを守って下さい。「リンクを貼る(ただのテキストではなく)」「マルチポストをする理由を書く」 https://teratail.com/help#posted-otherservice

Answer 1

asyncFuncA,B,Cは非同期通信のメソッドであるとします。（通信であることはそこまで重要ではないと思っておりますので、あくまで非同期処理についての説明になると思います。）

例えば、以下のようにasyncFuncA,B,Cを順番に呼んだとします。

asyncFuncA(function(a){
  console.log("実引数a",a);
},function(error){
  console.log("実引数error-a",error);
});

asyncFuncB(function(b){
  console.log("実引数b",b);
},function(error){
  console.log("実引数-error-b",error);
});

asyncFuncC(function(c){
  console.log("実引数c",c);
},function(error){
  console.log("実引数error-c",error);
});

なので、前回の非同期通信と言うのはasyncFuncBから見るとasyncFuncA、asyncFuncCから見るとasyncFuncBが前回の非同期通信と言えるでしょう。
すると、それぞれの処理は非同期に行われるため、asyncFuncAの結果が返ってくる前にasyncFuncBもasyncFuncCも実行されることになり、例えばAの処理が遅くてBの方が結果が返ってくるのが早ければ
実引数b、実引数a、実引数cのような順で表示されるかもしれません。

では、前回の非同期通信を待ってから次の非同期通信を呼ぶような処理をしていく説明をしていきます。
asyncFuncAを取り出してみます。

asyncFuncA(function(a){
  console.log("実引数a",a);
},function(error){
  console.log("実引数error-a",error);
});

asyncFuncAは非同期通信であるとすると、通信が返ってくるとconsole.log("実引数a",a);が呼ばれるようになっています。なのでasyncFuncAの通信が返ってきてからasyncFuncBを呼びたいとした場合（前回の非同期通信が終わってから呼び出したい）

asyncFuncA(function(a){
  // asyncFuncAの通信が終わるとここに入ってくる！！！
  console.log("実引数a",a);
  
  asyncFuncB(function(b){
    console.log("実引数b",b);
  },function(error){
    console.log("実引数-error-b",error);
  });

},function(error){
  console.log("実引数error-a",error);
});

こんな風に書くと必ずasyncFuncAが終わってからasyncFuncBを実行させることができると言うことなんですねー。

実際にはasyncFuncAには非同期通信の処理は書かれていないのでこのままプログラムを動かして結果を得るようなことはできませんが、あくまで非同期処理とその完了を待ってからプログラムを動かすと言うことがどのようなことがしたいかについてご説明させていただきました。

以上ですが、求めていた回答になっていますでしょうか？
何かわからない点があればコメントください。

Answer 2

ソースコードにはコールバックを記載しているように見えますが非同期通信は書かれていないと思います

Answer 3

転機していただいたソースが本当に書いてあるならあまりいい例示では
ないようです。
その例を題材に「前回の非同期通信」を説明するのは無理があるとおもいます

Comments

[aaaaaaaa]

ご回答ありがとうございます。
重ね重ね申し訳ありませんが、それは、何故なのでしょうか。

Answer 4

折角コードがあるのでしたら実行して確認してみたら良いのでは。

Comments

[aaaaaaaa]

ご回答ありがとうございます。96頁のソースのままだとエラーがでるのであっているかわかりませんが、追記して実行しました。
しかし、何がどうasyncFuncA >asyncFuncB >asyncFuncCの順に、前回の非同期通信完了を待ってから実行する、のか分かりませんでした。

当該のソースは、質問文に追記しました。