Axios调用Get接口获取嵌套二维数组时控制台打印为空问题

问题原因 #

这是JavaScript异步执行机制导致的：Axios发起的GET请求属于异步操作，代码不会等待请求返回结果再向下执行，你写的console.log会在接口响应回到前端之前就运行，此时orig还没有被赋值为接口返回的二维数组，所以会打印空数组。

解决方案 #

方案1：将后续逻辑移入then回调 #

所有需要用到接口返回的orig数组的逻辑，都放到then的回调函数内部，保证请求成功拿到数据后再执行相关操作：

let orig = []
axios
  .get('<endpoint url here>')
  .then(response => {
    orig = response.data.activity_history
    // 打印、push新数组等操作都放在这里执行
    console.log('Orig -> ' + JSON.stringify(orig))
    // 示例：向二维数组中push新数组
    orig.push(["新值1", "新值2", "新值3"])
  })

方案2：使用async/await语法简化异步逻辑 #

用async/await语法改写异步逻辑，更符合同步代码的书写习惯，可读性更高：

// 逻辑需要放在async修饰的函数中
async function getActivityHistory() {
  let orig = []
  const response = await axios.get('<endpoint url here>')
  orig = response.data.activity_history
  // 后续操作
  console.log('Orig -> ' + JSON.stringify(orig))
  orig.push(["新值1", "新值2", "新值3"])
}

// 调用函数执行请求
getActivityHistory()

如果你在Vue、React等前端框架中使用该逻辑，拿到数组后要注意对应框架的响应式更新规则，避免出现数据更新后视图不刷新的问题。

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