Question

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

我有3个getJson调用（用户，徽标和流）。这三个数据都在thisNameInfo数组中收集，用于构建html。

在其中一个流行的版本中，所有声明都被链接在一个符号行中。这没有产生错误，但是在执行getJson调用之前构建了html。读完这个帖子how to chain then functions后，我添加了3个调用例程（callUser，callLogo和callStream）。

它通过第一个callUser并给我无法读取属性＆＃39;然后＆＃39;未定义的用于＆＃39;然后＆＃39;在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，一旦Promise结算就会被调用：

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

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

未捕获的TypeError：无法读取属性＆＃39;然后＆＃39;链接3个getJson调用时未定义的

1 个答案: