如何从 API 获取随机数据

Question

我正在尝试从通过 vuejs 中的 api 获得的数据中获取随机 id。然后我正在尝试创建这样的代码。

data() {
   return {
     mostPlayed: [],
     randomData: [],
   }
},
created() {
   this.randomData = this.randomItem(this.mostPlayed);
},
methods: {
   async getMostPlayed() {
      try {
        const response = await axios.get(url);
        const data = response.data.slice(0, 9);
        this.mostPlayed = data;
      } catch (error) {
        console.log(error);
      },
   randomItem (items) {
      return items[Math.floor(Math.random() * items.length)];
    }
},
mounted() {
   this.getMostPlayed();
}

样本数据

[ 
 {
   id: 1
   title: "Forza Horizon 5"
 },
 {
   id: 2
   title: "Apex Legends"
 },
 {
   id: 3
   title: "Battlefield 2042"
 },
 {
   id: 4
   title: "Fortnite"
 },
 {
   id: 5
   title: "Genshin Impact"
 },
]

但是什么也没发生。我想用这样的样本数据获得随机 id。像这样的示例输出。 [ { id: 3 }, { id: 1 }, { id: 5 } ]。

Answer 1

您正在调用 mount 中的 API 调用方法，并从创建的播放次数最多的列表中生成随机列表。但是根据here给出的vue生命周期图，你可以看到created hook先出现，然后mounted hook。这样你就可以在一个空的最常播放的数组上创建随机列表。

作为解决方案，在 API 响应后调用内部创建的getMostPlayed 方法和getMostPlayed 内部的randomItem 方法。

类似这样的：

data() {
    return {
        mostPlayed: [],
        randomData: [],
    }
},
created() {
    this.getMostPlayed();
},
methods: {
    async getMostPlayed() {
         try {
             const response = await axios.get(url);
             const data = response.data.slice(0, 9);
             this.mostPlayed = data;
             this.randomData = this.randomItem(this.mostPlayed);
         } catch (error) {
             console.log(error);
         },
    randomItem (items) {
         return items[Math.floor(Math.random() * items.length)];
     }
}

如果您想拥有多个随机元素，请参阅此问题的答案，因为当前逻辑是从数组中获取单个随机元素：Get multiple random elements from array