javascript说array.length是未定义的，但不是数组

Question

我正在尝试通过将来自 Politifact API 的信息存储在一个名为“supperArray”的数组中来使用它。我通过调用 API 3 次，并将每个响应中的 10 个值推送到 superArray 来实现，如下所示：

const URL1 = "https://www.politifact.com/api/statements/truth-o-meter/people/barack-obama/json/?n=50";
const URL2 = "https://www.politifact.com/api/statements/truth-o-meter/people/hillary-clinton/json/?n=210";
const URL3 = "https://www.politifact.com/api/statements/truth-o-meter/people/bernie-s/json/?n=70";
var superArray = [];
        fetch("https://cors-anywhere.herokuapp.com/"+URL1)
        .then(results => {
            return results.json();
        })
        .then(data => {
            data=data.filter(function(item){return item.speaker.name_slug=="barack-obama" && item.statement_type.statement_type !== "Flip";});
            for(var i=0; i<10; i++){
                superArray.push(data.splice(Math.random()*data.length, 1)[0]);
            }
        })
        fetch("https://cors-anywhere.herokuapp.com/"+URL2)
        .then(results => {
            return results.json();
        })
        .then(data => {
            data=data.filter(function(item){return item.speaker.name_slug=="hillary-clinton" && item.statement_type.statement_type !== "Flip";});
            for(var i=0; i<10; i++){
                superArray.push(data.splice(Math.random()*data.length, 1)[0]);
            }
        })
        fetch("https://cors-anywhere.herokuapp.com/"+URL3)
        .then(results => {
            return results.json();
        })
        .then(data => {
            data=data.filter(function(item){return item.speaker.name_slug=="bernie-s" && item.statement_type.statement_type !== "Flip";});
            for(var i=0; i<10; i++){
                superArray.push(data.splice(Math.random()*data.length, 1)[0]);
            }
        })

当我要求 React 完整地记录 supperArray 时，如下所示：

console.log(superArray);

它记录了这个： 这是我所期望的。但是当我要求它记录一个特定的值时，像这样：

console.log(superArray[0]);

它记录的是undefined这是为什么？

Answer 1

原因是您没有在您的fetch 承诺中记录superArray。如果您在最后一次then() 调用中添加对console.log() 的调用，则它可以工作。这样做的原因是 fetch 是异步执行的，这意味着 fetch 调用之后的任何附加代码都会在 fetch 返回任何内容之前很久执行。

即使在 fetch 之外执行此操作，您也可以看到 superArray 的完整日志的原因是一种特殊的控制台行为。

const URL1 = "https://www.politifact.com/api/statements/truth-o-meter/people/barack-obama/json/?n=50";
const URL2 = "https://www.politifact.com/api/statements/truth-o-meter/people/hillary-clinton/json/?n=210";
const URL3 = "https://www.politifact.com/api/statements/truth-o-meter/people/bernie-s/json/?n=70";
var superArray = [];
fetch("https://cors-anywhere.herokuapp.com/" + URL1)
  .then(results => {
    return results.json();
  })
  .then(data => {
    data = data.filter(function(item) {
      return item.speaker.name_slug == "barack-obama" && item.statement_type.statement_type !== "Flip";
    });
    for (var i = 0; i < 10; i++) {
      superArray.push(data.splice(Math.random() * data.length, 1)[0]);
    }
  })
fetch("https://cors-anywhere.herokuapp.com/" + URL2)
  .then(results => {
    return results.json();
  })
  .then(data => {
    data = data.filter(function(item) {
      return item.speaker.name_slug == "hillary-clinton" && item.statement_type.statement_type !== "Flip";
    });
    for (var i = 0; i < 10; i++) {
      superArray.push(data.splice(Math.random() * data.length, 1)[0]);
    }
  })
fetch("https://cors-anywhere.herokuapp.com/" + URL3)
  .then(results => {
    return results.json();
  })
  .then(data => {
    data = data.filter(function(item) {
      return item.speaker.name_slug == "bernie-s" && item.statement_type.statement_type !== "Flip";
    });
    for (var i = 0; i < 10; i++) {
      superArray.push(data.splice(Math.random() * data.length, 1)[0]);
    }
    console.log(superArray[0]);
  })

Answer 2

可以在获取数据之前登录到您的控制台。为了确保这一点，请在完成数据后记录，即。里面.then()。

fetch(...)
.then(results => {...})
.then(data => {...})
.then(()=> console.log(superArr[0]))

或者，您可以使用：

superArray.length && console.log(superArray[0]);

Answer 3

我认为你的 URL 的获取在你的 console.log 之前没有被执行。

确保在输出到控制台之前执行所有承诺。