在vue3中的onMouted中使用async await请求多个接口数据怎么写
时间: 2023-05-20 19:06:50 浏览: 229
在Vue3中的onMounted中使用async await请求多个接口数据的代码示例如下:
```
import { onMounted, reactive } from 'vue'
export default {
setup() {
const state = reactive({
data1: null,
data2: null,
data3: null
})
const fetchData = async () => {
const [res1, res2, res3] = await Promise.all([
fetch('url1'),
fetch('url2'),
fetch('url3')
])
state.data1 = await res1.json()
state.data2 = await res2.json()
state.data3 = await res3.json()
}
onMounted(() => {
fetchData()
})
return {
state
}
}
}
```
在这个示例中,我们使用了Vue3的`onMounted`钩子函数来在组件挂载后调用`fetchData`函数。`fetchData`函数使用了`async/await`语法来并行请求多个接口数据,并使用`Promise.all`方法来等待所有请求都完成后再进行下一步操作。最后,我们将获取到的数据存储在`state`对象中,并将其返回给组件。
阅读全文