javascript - 如何将 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 请求数据放入数据元素时的控制台响应:

/image/vIndb.jpg

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;
}