在vue3中用async await写请求多个接口

在Vue3中，你可以使用`setup()`函数来使用`async/await`语法糖来请求多个接口。下面是示例代码：

<template>
  <div>
    <p v-if="isLoading">Loading...</p>
    <ul v-else>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue';

export default {
  setup() {
    const isLoading = ref(true);
    const items = reactive([]);

    onMounted(async () => {
      try {
        const [result1, result2, result3] = await Promise.all([
          axios.get('/api/one'),
          axios.get('/api/two'),
          axios.get('/api/three'),
        ]);

        // 将返回结果保存在items中
        items.push(...result1.data, ...result2.data, ...result3.data);

        isLoading.value = false;
      } catch (error) {
        console.error(error);
      }
    });

    return {
      isLoading,
      items,
    };
  },
};
</script>

在上面的示例中，我们使用`setup()`函数来定义Vue3组件，并在`onMounted()`生命周期函数中使用`await`关键字等待所有请求的结果。当所有请求都成功返回时，我们将返回结果保存在`items`数组中，并将`isLoading`变量设置为`false`。如果有任何一个请求失败，`catch()`方法将会捕捉到错误。最后，我们将`isLoading`和`items`作为响应式数据返回给模板。