【问题标题】:JavaScript callbacks - issues with accessing individual elements of a returned arrayJavaScript 回调 - 访问返回数组的单个元素的问题
【发布时间】:2018-03-01 23:44:07
【问题描述】:

自学并努力了解回调的工作原理。

我的回调处理函数无法访问数组的单个元素,即:

  • “console.log(ResultsArray)”有效
  • “console.log(ResultsArray[1])”返回“未定义”

但是,“ResultsArray[1]”直接在 Firefox 控制台中执行时效果很好。

我做错了什么?

<script>
   ArrayOfTickers=["SPY","DIA","IWM","C"];
   ResultsArray=[];
   SomeArray=[]

   function Main(Array, callback){
       recursive(0);

       function recursive(counter) {

           if (counter < ArrayOfTickers.length) {
               fetch("https://api.iextrading.com/1.0/stock/" + ArrayOfTickers[counter] + "/time-series")
                   .then(function(response) {
                       response = response.json()
                       .then(function(data) {
                           ResultsArray[counter]=data
                       })
                    }) 
                recursive(counter+1);
            } else {
                callback(ResultsArray);
            };
        } //End recursive function
    };  //End Main Function.
    Main(ArrayOfTickers, function(ResultsArray){
        console.log(ResultsArray)
    })
</script>

【问题讨论】:

  • ResultsArray 究竟返回了什么,它是否返回一个数组结构,该数组中是否有任何项目?
  • ResultsArray [...] 0: 数组 [ {...}, {...}, {...}, ... ] 1: 数组 [ {...}, {...}, {...}, ... ] 2:数组 [ {...}, {...}, {...}, ... ] 3:数组 [ {...}, {...}, {...}, ... ] 长度:4

标签: javascript callback


【解决方案1】:

"console.log(ResultsArray)[1])"

应该是console.log(ResultsArray[1]),括号不好。

【讨论】:

  • console.log(ResultsArray[1]) 产生“未定义”
【解决方案2】:

首先,如果您要使用回调,请使用错误优先回调,如下所示:

const results = [];

function main(cb) {

  (function recursive(counter) {

    if (counter >= ArrayOfTickers.length) {
      return cb(null);
    }

    const url = `https://api.iextrading.com/1.0/stock/${ArrayOfTickers[counter]}/time-series`;

    fetch(url)
    .then(function (response) {
      return response.json();
    })
    .then(function (data) {
      results.push(data);
      recursive(counter + 1);
    })
    .catch(cb);

  })(0)

}

main(function (err) {
  if (err) throw err;
  console.log(results)
});

// 但最好使用这样的承诺

function main() {

  const recursive = function (counter) {

    if (counter >= ArrayOfTickers.length) {
      return;
    }

    const url = `https://api.iextrading.com/1.0/stock/${ArrayOfTickers[counter]}/time-series`;

    return fetch(url)
    .then(function (response) {
      return response.json();
    })
    .then(function (data) {
      results.push(data);
      return recursive(counter + 1);
    });

  };

  return recursive(0);

}

main().then(function(){
  // check results
})
.catch(function(err){
   // handle error
});

【讨论】:

  • 如果您的 ArrayOfTickers 长度不同,并且长度可能为 0,为了安全起见,您应该使用 return Promise.resolve(null) 而不仅仅是 return,以确保您始终返回一个承诺。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-04-11
  • 1970-01-01
  • 2011-08-07
  • 2011-04-08
  • 1970-01-01
  • 2018-05-24
  • 1970-01-01
相关资源
最近更新 更多