显示array(0)，但点开之后有数据

Question

求助啊，感觉应该是异步的问题，但具体是哪方面导致的呢？

let index = 0
let resultTopData = []
while (index < 6) {
  let topList = await request('/top/list?',{
    idx:index++
  })
  let topData = []
  topData.name = topList.playlist.name
  topData.tracks = topList.playlist.tracks.slice(0, 5)
  resultTopData.push(topData)
  this.setData({
    topListData:resultTopData
  })
}
console.log(this.data.topListData)

Answer 1

let topData = []
topData.name = topList.playlist.name
topData.tracks = topList.playlist.tracks.slice(0, 5)

看这里，topData 本来就是个数组，但是没有放入任何内容，而是当作对象加了 name 和 tracks 两个属性。

---

我猜你想干的是这个事情：

const promises = [...Array(5).keys()]   // [0,1,2,3,4]
    .map(idx => ({ idx }))      // [{ idx: 0 }, { idx: 1 } ... ]
    .map(param => request("/top/list?", param));
const resultTopData = (await Promise.all(promises))
    .map(topList => ({
        name: topList.playlist.name,
        tracks: topList.playlist.tracks.slice(0, 5)
    }));        // { { name: ..., tracks: [...] }, ... ]
this.setData({ topListData: resultTopData });

如果异步调用中可能存在错误，可以考虑使用 allSettled() 代替 all()

const resultTopData = (await Promise.allSettled(promises))
    .filter(({ status }) => status === "fulfilled")     // 只处理成功的
    .map(({ value: topList }) => ({                     // 成功决议的 value 就是异步返回值
        name: topList.playlist.name,
        tracks: topList.playlist.tracks.slice(0, 5)
    }));

Answer 2

setData 是异步的没错。

但这里的根本原因是 console.log 打印的引用类型是“惰性”的。

Answer 3

站内其实有相关问题的，控制台打印的是快照，也就是打印时数据是什么样就什么样，后续的更改不会影响快照的展示，但是展开数据时则是实时获取数据