异步获取JSON数据存入数组后无法访问元素的问题

核心问题：异步代码的执行顺序 #

fetch是异步操作，你的console.log会在fetch的回调函数（即.then(data => rooms.push(...data.roomList))）执行之前就运行了。此时rooms还是空数组，所以rooms[3]、rooms.at(2)自然返回undefined。

控制台之所以看起来rooms有数据，是因为浏览器控制台会实时更新数组快照——当后续fetch回调完成、数组被填充后，控制台显示的是更新后的状态，但你实际访问索引时，对应代码已经执行完毕，当时的数组确实是空的。

解决方案 #

你需要确保在rooms被填充完成后，再去访问它的元素或做后续处理，以下是几种可行方式：

方式1：在fetch回调内处理数据（推荐） #

把需要使用rooms的逻辑放到.then回调里，保证数据已加载完成：

var rooms = [];
var anti = [
    {
        "Name": "EXIT STAIR",
        "Number": "E-120",
    },
    {
        "Name": "STAFF TOILET",
        "Number": "E-116",
    },
    {
        "Name": "PATIENT TOILET",
        "Number": "D-123",
    }
];

fetch("mp-rooms.json")
    .then(response => response.json())
    .then(data => {
        rooms.push(...data.roomList);
        // 在这里处理rooms数据，比如传递给Vue组件
        console.log('roomtest', rooms, rooms[3], rooms.at(2));
    })

console.log('local', anti, anti[0], anti.at(1));

方式2：使用async/await语法（更直观） #

用async函数包裹代码，让异步逻辑看起来像同步执行：

var rooms = [];
var anti = [
    {
        "Name": "EXIT STAIR",
        "Number": "E-120",
    },
    {
        "Name": "STAFF TOILET",
        "Number": "E-116",
    },
    {
        "Name": "PATIENT TOILET",
        "Number": "D-123",
    }
];

async function loadRooms() {
    const response = await fetch("mp-rooms.json");
    const data = await response.json();
    rooms.push(...data.roomList);
    // 数据加载完成后执行后续逻辑
    console.log('roomtest', rooms, rooms[3], rooms.at(2));
}

loadRooms();

console.log('local', anti, anti[0], anti.at(1));

关键说明 #

你查阅的资料核心就是解决异步执行顺序问题——不是不能把数据存到外部变量，而是必须等异步操作完成后再使用这个变量。你之前的问题本质是使用变量的时机太早，和变量是否全局无关。

内容的提问来源于stack exchange，提问作者jumki