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）的响应放入数组时，它们最终会变空。

但是，如果我发表评论，那就是那些猫... =＃和＆＃39; that.dogs = dogsRes＆＃39;控制台打印出响应正常。

有人可以告诉我为什么这不起作用吗？

理想情况下，我想为猫视频制作一个阵列，为狗视频制作阵列，并为猫和狗制作阵列。

*编辑*

当我尝试将GET请求数据放入数据元素时，Top是控制台响应，当我不尝试将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;
}

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

1 个答案: