Uncaught TypeError：无法读取链接3 getJson调用时未定义的属性'then'

Question

我是新来链接JavaScript承诺。我阅读了关于上述错误的所有答案。增加了很多返回，但仍然不明白为什么它返回undefined。

我有3个getJson调用（用户，标志和流）。来自所有三个数据都在thisNameInfo数组中进行收集，并用于构建html。

在其中一个prevous版本中，所有的陈述都链接在一个signle行中。这并没有产生错误，但是在执行getJson调用之前构建了html。看完这个线程how to chain then functions我加了3个调用例程（callUser，callLogo和callStream）。

它通过第一个呼叫用户，并给我无法读取属性'then'的未定义的'then'在callLogo之后。在代码中使用``````````````````强调错误点。

感谢您的帮助。

如果你有建议如何更好地将数据从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); 

第二承诺后，取消定义点callLogo

Answer 1

它看起来像你的问题可能是，你是不是传递回调函数到每个then()。

当你传递callLogo(name, thisNameInfo)到then()，你实际上是立即调用该函数，并传递给它的返回值：

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

相反，你需要通过一个callback function将被调用一次承诺解决：

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

您需要在使用then()时随时进行此操作。