JavaScript访问数组元素返回undefined fetch存数据后读取异常

• fetch 是异步执行的API，调用get_data函数时，网络请求还没返回结果，函数就已经把初始化的空数组datas返回了。
• 控制台打印整个数组能看到内容是浏览器的特殊机制导致：控制台输出引用类型数据时存储的是内存引用，你点击展开数组的时候，网络请求已经完成，数组已经被填充，所以能看到完整内容。但同步执行console.log(array[0])时，数组还未被赋值，自然返回undefined。

方案1：使用async/await语法（推荐，可读性更高） #

const entry_point = "http://localhost:8000/api/v1/titles/"

// 声明为异步函数
async function get_data(genre, page) {
    const res = await fetch(`${entry_point}?genre=${genre}&page=${page}`)
    const data = await res.json()
    return data.results
}

// 异步逻辑要放在异步上下文内执行
;(async () => {
  const array = await get_data('Action', 1)
  console.log(array)
  console.log(array[0]) // 可正常获取到值
})()

方案2：使用Promise链式调用 #

const entry_point = "http://localhost:8000/api/v1/titles/"

function get_data(genre, page) {
    // 直接返回Promise实例，外部通过then接收结果
    return fetch(`${entry_point}?genre=${genre}&page=${page}`)
        .then(res => res.json())
        .then(data => data.results)
}

get_data('Action', 1).then(array => {
  console.log(array)
  console.log(array[0]) // 回调执行时请求已完成，可正常取值
})

注意：所有依赖接口返回数据的逻辑，必须放在异步回调内，或者在await之后执行，不能在同步代码里直接读取异步返回的结果。

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