47273


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

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

    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);
    })
    
[/code]

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

試したソース

[code]

    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);
    });
    
[/code]

`

<https://teratail.com/questions/137033>


CC BY-SA 4.0
2018-08-03T10:06:11.677
47216
2018-08-06T04:29:01.040
27720
question
javascript ajax 非同期
どの部分が前回の非同期通信なのか


「asyncFuncA >asyncFuncB
>asyncFuncCの順に、前回の非同期通信完了を待ってから実行する」というのは、もう少し詳しく書くと、「asyncFuncA >asyncFuncB
>asyncFuncCの順に、asyncFuncAの非同期通信完了を待ってからasyncFuncBを実行し、asyncFuncBの非同期通信完了を待ってからasyncFuncCを実行する」という意味だと思います。

実際に動作する非同期関数のサンプルを`XMLHttpRequest`を使って書いてみます。

[code]

    function asyncFunc(url, callback, error) {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.onload = function() {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                callback(xmlHttp.responseText);
            }
        };
        xhr.onerror = function () {
            error(xhr.statusText);
        };
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
    }
    
[/code]

それは、以下のように使います。

[code]

    asyncFunc(url, function(res1){
      asyncFunc(url + '?id=' + res1.id, function(res2){
        console.log(res2);
      },function(error){
        console.log(error);
      })
    },function(error){
      console.log(error);
    });
    
[/code]

質問のように３つ重ねるのは面倒なので2つにしておきました。


CC BY-SA 4.0
2018-08-06T04:29:01.040
47273
2018-08-06T04:29:01.040
15171
47216
answer