vue3初始化数据异步加载的最好方式


```javascript
<script setup lang="ts">
import { onMounted } from "vue";
.....
.....
.....
async function fetchLiveSetting() {
  const { data, code } = await getLiveSetting('Agora')
  if(code === 200) {
    agoraPara.appid = data.app_id
    agoraPara.token = data.token
    agoraPara.channel = data.channel
```javascript
  }
}
const getAircrafts = async () => {
  await getExeDrones({ workspace_id: workspaceId }).then(res => {
    aircrafts.value = res.data
    form.dock_sn = res.data[0].dock_sn 
    console.log('sn', form.dock_sn);
  }).catch(err => { console.log(err) })
}
const getWayLineList = async () => {
  await getLineData({ workspace_id: workspaceId }).then(res => {
    lineList.value = res.data;
  }).catch(err => { console.log(err) })
}

onMounted(async () => {
  await fetchLiveSetting() 
  await getAircrafts()
  await getWayLineList()
  if (form.dock_sn) {
      // 业务代码
  }
``` 总结: 1.onMounted内需要async异步; 2.里面的封装的其他方法本身如果有接口调用,本身也需要异步; 3.还可以使用`promise.all([method1, mothod2, mothod3]).then(res => {}).catch(e => {})`
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐