如何将来自 axios.all 的响应推送到 vue 数据元素？

Question

我正在使用 axios.all 对 YouTube API 进行异步调用。

我的代码是：

export default {
  data () {
    return {
      cats: [],
      dogs: [],
      catsAndDogs: []
    }
  },
  methods: {
    search: function (){
      var that = this
      axios.all([
        axios.get('https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=cats&key=API_KEY'),
        axios.get('https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=dogs&key=API_KEY')
      ])
      .then(axios.spread(function (catsRes, dogsRes) {
        that.cats = catsRes
        that.dogs = dogsRes

        console.log(catsRes)
        console.log(dogsRes)
      }))
    }
  }
}

这是我所能得到的，因为当我尝试将来自 axios.spread（catsRes 或 dogsRes）的响应放入数组时，它们最终是空的。

但是，如果我注释掉 'that.cats = catsRes' 和 'that.dogs = dogsRes'，控制台会打印出正确的响应。

谁能告诉我为什么这不起作用？

理想情况下，我希望有一个只用于猫视频的数组、一个用于狗视频的数组以及一个包含猫和狗的数组。

* 编辑 *

顶部是我尝试将 GET 请求数据放入数据元素时的控制台响应，底部是我不尝试将 GET 请求数据放入数据元素时的控制台响应：

https://imgur.com/a/NY1nc

Answer 1

axios 响应是一个对象，其中包含有关响应的一些附加信息。要获取实际的响应 JSON 数据，请使用响应对象的 data 属性。此外，YouTube 响应似乎将实际结果放在 items 属性中，所以也使用它：

async search () {
    const [cats, dogs] = await axios.all([
        axios.get('...cats url...'),
        axios.get('...dogs url...'),
    ]);

    this.cats = cats.data.items;
    this.dogs = dogs.data.items;
}