Uncaught TypeError：3つのgetJson呼び出しを連鎖するときに 'then'プロパティが未定義です。

Question

私はJavaScriptの約束を連鎖させるのが初めてです。私は上記のエラーに関するすべての答えを読んだ。多くのリターンが追加されましたが、なぜそれが未定義に戻っているのか理解できません。

私は3つのgetJson呼び出し（ユーザー、ロゴ、ストリーム）を持っています。 3つすべてのデータはthisNameInfo配列に集約され、htmlを構築するために使用されます。

以前のバージョンの1つでは、すべてのステートメントが1つのsignle行にチェーンされていました。これはエラーを生成しませんでしたが、getJson呼び出しが実行される前にhtmlがビルドされていました。このスレッドを読んだ後how to chain then functions私は3つの呼び出しルーチン（callUser、callLogoとcallStream）を追加しました。

最初のcallUserを渡して私に与えますcallLogoの後に定義されていない 'then'のための未定義のを読み取ることができません。エラーのポイントは `` `` `` `` `のコードの下線です。

ありがとうございました。

getJsonの呼び出しからhtmlを構築する関数へのデータをよりうまく渡す方法をお聞きしたいと思います。第二約束した後

var allStreamers = ["freecodecamp", "animeexpo", "brunofin"]; 

// build html for one stereamer 
var buildStreamerHtml = function(thisNameInfo){ 
    //build html using thisNameInfo 
    ... some code goes here 
    $("#display").append(html); 
}; 

// get user 
var user = function(name, thisNameInfo){ 
    // return promise or "then" will return undefined!!! 
    return $.getJSON(
     "https://wind-bow.glitch.me/twitch-api/users/" + name, 
     function(data) { 
     // if user does not exist data.error if 404 and data.message exist 
     if (data.message) { 
      thisNameInfo.userExist = "no"; 
      thisNameInfo.title = data.message; 
      thisNameInfo.url = "#"; 
      thisNameInfo.logo = ""; 
     } else{ 
      thisNameInfo.userExist = "yes"; 
     } 
     });  
}; 

// get logo, title and url 
var logo = function(name, thisNameInfo){ 
    if (thisNameInfo.userExist === "yes"){ 
    // get logo and title with link to url  
    // return promise or "then" will return undefined!!! 
    return $.getJSON("https://wind-bow.glitch.me/twitch-api/channels/" + name,  
      function(dataChannel) { 
       thisNameInfo.url = dataChannel.url; 
       thisNameInfo.title = dataChannel.display_name; 
       thisNameLogo.logo = dataChannel.logo; 
      }); 
    } 
}; 

// get stream title and number of watchers 
var stream = function(name, thisNameInfo){ 
    if (thisNameInfo.userExist === "yes"){ 
    // return promise or "then" will return undefined!!! 
    return $.getJSON("https://wind-bow.glitch.me/twitch-api/streams/" + name, 
      function(dataStreams) { 
       if (dataStreams.stream) { 
       thisNameLogo.status = "Online"; 
       thisNameLogo.streamTitle = dataStreams.stream.channel.status; 
       thisNameLogo.viewers = dataStreams.stream.viewers; 
       } else { 
       thisNameLogo.status = "Offline"; 
       } 
      }); 
    } 
}; 

var callUser = function(name, thisNameInfo){ 
    return user(name, thisNameInfo).then(callLogo(name, thisNameInfo)); 
}; 

var callLogo = function(name, thisNameInfo){ 
    return logo(name, thisNameInfo).then(callStream(name, thisNameInfo)); 
};        `````````````````````````````````````` 

var callStream = function(name, thisNameInfo){ 
    return stream(name, thisNameInfo); 
}; 

// link together all asinhronious calls for one streamer 
var getStreamerInfo = function(name){ 
    "use strict"; 
    // this variable builds up by assinhronious calls 
    // then its value is usedd by buildStreamerHtml 
    console.log("getStreamerInfo name: " + name); 
    var thisNameInfo = {}; 
    callUser(name, thisNameInfo).then(buildStreamerHtml(thisNameInfo)); 
}; 

// loop through all streamers and display them 
allStreamers.forEach(getStreamerInfo); 

未定義のポイントは、あなたの問題は、あなたが各then()にコールバック関数を渡していないことが考えられますように見えます

Answer 1

をcallLogo：

は、ここに私のコードです。

あなたはthen()にcallLogo(name, thisNameInfo)を渡すときに、あなたが実際にすぐに関数を呼び出し、それの戻り値を渡している。

return user(name, thisNameInfo).then(callLogo(name, thisNameInfo)); 

代わりに、あなたは約束を解決した後に呼び出されますcallback function合格する必要があります：

を

return user(name, thisNameInfo).then(function() { 
    callLogo(name, thisNameInfo) 
}); 

いつでもthen()を使用する必要があります。