Vue项目中使用axios.all处理多请求遇undefined问题及优化咨询

我来帮你梳理下问题所在，再给你几个更顺手的实现方案～

你的代码里有两个核心问题导致了undefined的出现：

1. getVideos函数逻辑错误：循环的第一次迭代就直接return了，所以不管你选中几个选项，它只会发送第一个请求并返回对应的Promise，完全不会处理剩下的URL。
2. axios.all传参错误：你传给它的是[getVideos()]，这意味着即便选中两个选项，这个数组里也只有一个Promise。后续axios.spread里的第二个参数dogRes自然没有对应的值，变成了undefined，赋值时就会出问题。

优化方案一：用Promise.all批量处理请求 #

我们可以直接把选中的URL转换成Promise数组，一次性发起所有请求，代码更简洁直观：

data () {
  return {
    catVideos: true,
    dogVideos: true,
    catResults: [],
    dogResults: [],
    catAndDogResults: []
  }
}, 
methods: {
  search() {
    const catsUrl = 'https://www.googleapis.com/youtube/v3/search?part=snippet&q=cats'
    const dogsUrl = 'https://www.googleapis.com/youtube/v3/search?part=snippet&q=dogs'
    const requestPromises = []
    
    // 根据选中状态添加对应请求Promise
    if (this.catVideos) {
      requestPromises.push(axios.get(catsUrl))
    }
    if (this.dogVideos) {
      requestPromises.push(axios.get(dogsUrl))
    }

    // 批量处理所有请求
    Promise.all(requestPromises)
      .then(responses => {
        // 先重置结果数组
        this.catResults = []
        this.dogResults = []
        
        // 根据请求顺序分配结果
        responses.forEach((res, index) => {
          if (index === 0 && this.catVideos) {
            this.catResults = res.data.items
          } else if (this.dogVideos) {
            this.dogResults = res.data.items
          }
        })
        
        // 合并结果
        this.catAndDogResults = [...this.catResults, ...this.dogResults]
      })
      .catch(err => {
        // 别忘了处理请求失败的情况
        console.error('请求出错啦:', err)
      })
  }
}

优化方案二：用async/await（更易读的写法） #

Vue的methods支持async函数，用await可以让异步代码看起来像同步代码，可读性拉满，还不用再处理that=this的麻烦：

data () {
  return {
    catVideos: true,
    dogVideos: true,
    catResults: [],
    dogResults: [],
    catAndDogResults: []
  }
}, 
methods: {
  async search() {
    const catsUrl = 'https://www.googleapis.com/youtube/v3/search?part=snippet&q=cats'
    const dogsUrl = 'https://www.googleapis.com/youtube/v3/search?part=snippet&q=dogs'
    const requestPromises = []
    
    if (this.catVideos) {
      requestPromises.push(axios.get(catsUrl))
    }
    if (this.dogVideos) {
      requestPromises.push(axios.get(dogsUrl))
    }

    try {
      // 等待所有请求完成
      const responses = await Promise.all(requestPromises)
      
      this.catResults = []
      this.dogResults = []
      
      responses.forEach((res, index) => {
        if (index === 0 && this.catVideos) {
          this.catResults = res.data.items
        } else if (this.dogVideos) {
          this.dogResults = res.data.items
        }
      })
      
      this.catAndDogResults = this.catResults.concat(this.dogResults)
    } catch (err) {
      console.error('搜索失败:', err)
    }
  }
}

额外的扩展性优化建议 #

如果后续要加更多动物选项（比如兔子、仓鼠），可以把选项和URL的对应关系做成配置数组，这样新增选项只需要加配置，不用改逻辑代码：

// 在data或外部定义配置
const videoConfigs = [
  { optionKey: 'catVideos', apiUrl: 'https://www.googleapis.com/youtube/v3/search?part=snippet&q=cats', resultKey: 'catResults' },
  { optionKey: 'dogVideos', apiUrl: 'https://www.googleapis.com/youtube/v3/search?part=snippet&q=dogs', resultKey: 'dogResults' },
  // 新增选项直接加这里就行
  // { optionKey: 'rabbitVideos', apiUrl: 'xxx', resultKey: 'rabbitResults' }
]

// 然后在search方法里遍历配置生成请求
const requestPromises = videoConfigs
  .filter(config => this[config.optionKey])
  .map(config => axios.get(config.apiUrl))

// 后续分配结果也可以遍历配置
responses.forEach((res, index) => {
  const matchedConfig = videoConfigs.find(config => this[config.optionKey])
  this[matchedConfig.resultKey] = res.data.items
})

内容的提问来源于stack exchange，提问作者Dachan