AJAX 调用后：数组访问有效，但数组元素访问无效[重复]答案

【问题标题】：After AJAX call: Array Acces works, but Array Element Access doesn't work [duplicate]AJAX 调用后：数组访问有效，但数组元素访问无效[重复]
【发布时间】：2020-06-25 02:31:32
【问题描述】：

我是一名 JavaScript 新手，在对本地 JSON 文件进行 AJAX 调用以及随后访问结果数据数组的元素时遇到问题。我从本地 JSON 文件中获取名为“数字”的值并将它们放入一个数组中。 我的问题是：我可以很好地记录整个数组，但不能用“data[0]”记录单个数组值。

经过长时间的搜索，我现在很确定这是一个 AJAX 问题，因为如果我将日志记录功能放入 setTimeout，我可以记录元素。我认为 async-await 部分可以解决这个问题，但显然它没有。我曾尝试在 makeDataArray() 中使用“return new Promise((resolve, reject) => { ...”语法，但它也不起作用。我不明白为什么 await-keyword 不起作用等待“足够长”的时间让 makeDataArray() 函数完成。有人可以向我解释一下吗？

如果这很重要：我不允许使用 jQuery，这就是我使用 asycn-await 构造的原因。

这是 JavaScript：

async function makeDataArray() {
        var myNumbers = new Array();
        fetch('../data/someNumbers.json')
            .then(response => response.json())
            .then(data => {
                data.forEach(element =>{
                    myNumbers.push(element.number);
            })
        })  
        return myNumbers;
}

async function printArrayElements(){
    let data = await makeDataArray();
    console.log(data); //works correctly
    console.log(data[0]); //undefined
    setTimeout(function(){ 
        console.log(data[0]);}, //works correctly
        3000);
}

printArrayElements();

这是 JSON 文件：

[{
    "number": 10
},
{
    "number": 20
},
{
    "number": 30
}
]

【问题讨论】：

这根本不应该工作；你的承诺链没有返回任何东西，你甚至没有返回makeDataArray中的承诺。
感谢您指出，缺少的返回语句是复制粘贴和事后编辑错误。我更正了。
但是函数前面的async关键字不是自动返回promise吗？至少我在本教程中读到了 javascript.info/async-await
是的，但是如果你没有 return 语句，promise 不会产生你的结果。
在你更新的代码中你需要awaitfetch来修复它，否则你直接返回空的myNumbers数组。但我不会像这样混合then 和async。

标签： javascript arrays json async-await

【解决方案1】：

这看起来很不对；如果您使用 then 链，这就是我所期望的：

function makeDataArray() {
    return fetch('../data/someNumbers.json')
        .then(response => response.json())
        .then(data => data.map(x => x.number))
}

如果您使用链接，则需要在最后一个 then 中返回结果。

使用异步/等待：

async function makeDataArray() {
    const response = await fetch('../data/someNumbers.json');
    const json = await response.json();
    
    return json.map(x => x.number);
}

【讨论】：

【解决方案2】：

我很确定您发布的代码不是您获取控制台日志的代码。 makeDataArray 函数没有任何 return 语句，因此它将返回一个 Promise<void> - 一个将解决为空的承诺。你可能想要这样的东西：

async function makeDataArray() {
    const data = await fetch('../data/someNumbers.json')
    return await data.json();
}

【讨论】：