vue 第一次axios请求得到一个数组，然后根据循环数组获得id进行第二次axios请求，请问如何处理速度最快？

Posted 2023-05-04

第一次axios请求会得到一个数组，循环显示在列表上，数组中包含比如城市id，再根据这个城市id进行第二次axios请求得到中文名，在列表上显示，请问如何处理，请求的速度最快

参考技术A 正常操作应该是合并到第一次的请求里，单独为城市中文名做循环请求显然是划不来的。
如果硬要分开循环请求的话，也没啥特别的办法能加快速度。追问

目前就是在第一次请求后，得到数组，然后进行第二次的请求，取出城市只是其中一个，多的有5个差不多，谢谢你了

参考技术B 像这种地址的，数据量不大的话，可以直接遍历把所有数据取出，然后直接显示追问

我目前就是这样操作的，取出城市id只是其中一个，还有几个参数的id，所以想看看有没有方法更好一些，谢谢你

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

【中文标题】根据选项将 axios.get URL 传递给 axios.all

【英文标题】：Passing axios.get URLs into axios.all based on options

【发布时间】：2018-06-27 17:34:07

【问题描述】：

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

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

我正在遍历该数组并运行 axios.get() 并返回值。我在 Promise 下收到响应，其中包含 [[PromiseValue]] 内的对象。

最后，我将响应组合成一个 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)
  ))

编辑

修正拼写错误

【问题讨论】：

请不要忘记选择接受的答案。

【参考方案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)  ... )

【参考方案2】：

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

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