Question

我正在构建一个vue应用程序，它将根据选择的选项搜索YouTube频道。

当选项为TRUE时，我将该字符串推送到一个数组中，该数组包含axios.get（）请求的URL。

我循环遍历该数组并运行axios.get（）并返回该值。我在[[PromiseValue]]内的Promise {} with和object下得到了回复。

最后我将响应组合到一个vue数据元素（catAndDogResults）中，但最后我得到了一个未定义的。

有没有更好的方法来做我想做的事情？

data () {
  return {
    catVideos: true,
    dogVideos: true,
    catResults: [],
    dogResults: [],
    catAndDogResults: []
  }
},
methods: 
  search: function() {
  var that = this
  var cats =  'https://www.googleapis.com/youtube/v3/search?part=snippet&q=cats'
  var dogs =  'https://www.googleapis.com/youtube/v3/search?part=snippet&q=dogs'
  var urls = []

  if (this.catVideos == true) {
    urls.push(cats)
  }

  if (this.dogVideos == true) {
    urls.push(dogs)
  }

  function getVideos() {
    for (var i = 0; i < urls.length; i++) {
      console.log(axios.get(urls[i])) // returns under [[PromiseValue]]:object
        return axios.get(urls[i])
    }
  }

  axios.all([
    getVideos()
  ])
  .then(axios.spread(function (catRes, dogRes) {
    that.catResults = catRes.data.items
    that.dogResults = dogRes.data.items
    that.catAndDogResults = that.catResults.concat(that.dogResults)
  }))
}

编辑

修正了拼写错误

Answer 1

尝试更改getVideos()方法，以便在 for循环后返回数组：

function getVideos() { var requests = []; for (var i = 0; i < urls.length; i++) { requests.push(axios.get(urls[i])); } return requests; }

然后，就这样称呼它：

axios.all(getVideos()) .then(function (catRes, dogRes) { ... })

Answer 2

@tiagodws提供的答案应该可以解决这个问题。我只是想重写getVideos函数，你可以使用ES6语法编写它，如下所示：

var getVideos = () =>  urls.map(url => axios.get(url))

根据选项将axios.get URL传递到axios.all

2 个答案: