实现一段获取多个封装api中数据并合并·的vue 代码

假设已经有多个封装好的API，每个API返回的数据格式相同，都是一个包含多个对象的数组。可以使用Vue.js的异步组件和Promise.all()方法来获取并合并这些API的数据。

首先，在Vue组件的data属性中定义一个空数组来存储所有API返回的数据：

data() {
  return {
    allData: []
  }
}

然后，在Vue组件的mounted生命周期钩子函数中，使用Promise.all()方法来获取所有API的数据，并将它们合并到allData数组中：

mounted() {
  const api1 = getApi1Data()
  const api2 = getApi2Data()
  const api3 = getApi3Data()

  Promise.all([api1, api2, api3]).then(results => {
    this.allData = results.reduce((acc, data) => acc.concat(data), [])
  })
}

上述代码中，getApi1Data()、getApi2Data()和getApi3Data()是封装好的API函数，它们返回一个Promise对象，该对象解析为一个包含多个对象的数组。Promise.all()方法接收一个Promise对象数组，等待所有Promise对象都解析后返回一个新的Promise对象，该对象解析为一个包含所有Promise对象解析结果的数组。然后，使用reduce()方法将所有API返回的数据合并到allData数组中。

最后，在Vue组件的模板中使用v-for指令渲染allData数组中的数据：

<template>
  <ul>
    <li v-for="data in allData" :key="data.id">
      {{ data.name }}
    </li>
  </ul>
</template>

上述代码中，v-for指令用于循环渲染allData数组中的每个对象，使用:data.id作为key值来提高渲染效率。在li元素中，使用{{ data.name }}来显示每个对象的名称属性。

完整代码如下：

<template>
  <ul>
    <li v-for="data in allData" :key="data.id">
      {{ data.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      allData: []
    }
  },
  mounted() {
    const api1 = getApi1Data()
    const api2 = getApi2Data()
    const api3 = getApi3Data()

    Promise.all([api1, api2, api3]).then(results => {
      this.allData = results.reduce((acc, data) => acc.concat(data), [])
    })
  }
}
</script>