未定义的TypeError:当链接3个getJson调用时，无法读取未定义属性的“那么”

Question

我刚开始链接JavaScript的承诺。我阅读了所有关于上述错误的答案。添加了大量的返回，但仍然不明白为什么返回未定义。

我有3个getJson调用(用户，标志和流)。所有这三个方面的数据都被合并到thisNameInfo数组中，并用于构建html。

在其中一种预防版本中，所有的状态都被锁在一条信号线上。这不会产生错误，但是html是在执行getJson调用之前生成的。在阅读了这个线程如何链接然后函数之后，我添加了3个调用例程(callUser、callLogo和callStream)。

它首先传递callUser，并在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));

相反，您需要传递一个回调函数，它将在承诺解决后被调用：

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

无论何时使用then()，您都需要这样做。