JavaScript中访问数组索引始终返回undefined问题求助

• 核心是JavaScript异步执行顺序问题：axios.get属于异步网络请求，发起后不会阻塞后续代码的同步执行。你调用loadChannels()之后，不等请求返回结果，就立刻执行了后续的console.log('index 0 :', channels[0])，此时channels数组还没有被推入任何数据，自然返回undefined。
• 你在控制台看到打印的channels存在数据，是浏览器控制台的引用读取特性：你手动展开数组时，浏览器才会读取数组的最新值，而代码执行打印的那一刻，数组确实是空的。
• 额外问题：你代码中IP字段没有补全http:///https://协议前缀，会直接导致axios请求失败。

推荐使用async/await+Promise.all的写法，等待所有请求全部执行完成后，再操作channels数组：

const Servers = [{
    "ID": 1,
    "IP": "http://192.168.1.11", // 补全请求协议
    "Enabled": true,
  },
  {
    "ID": 2,
    "IP": "http://192.168.1.12",
    "Enabled": true,
  }
]

const loadChannels = async () => {
  // 过滤启用的服务器，生成请求Promise数组
  const requestTasks = Servers
    .filter(server => server.Enabled)
    .map(server => axios.get(server.IP))
  // 等待所有请求完成
  const responses = await Promise.all(requestTasks)
  // 处理返回结果生成channels
  const channels = responses
    .filter(res => res.data.response < 400)
    .map(res => res.data.data)
  return channels
}

// 等待所有请求完成后再打印访问
loadChannels()
  .then(channels => {
    console.log('channels', channels)
    console.log('index 0 :', channels[0])
  })
  .catch(err => {
    console.log('请求异常：', err)
  })

内容的提问来源于stack exchange，提问作者Mustafa W Alani