vue3中setup解决async await

在 Vue 3 中，setup 函数可以使用 async/await 进行异步操作。在表单验证中，你可以使用 async/await 来等待异步验证结果。 下面是一个简单的例子： ``` <template> <form @submit.prevent="submitForm"> <div> <label for="username">Username:</label> <input type="text" v-model="username"> <div v-if="usernameError">{{ usernameError }}</div> </div> <div> <label for="password">Password:</label> <input type="password" v-model="password"> <div v-if="passwordError">{{ passwordError }}</div> </div> <button type="submit">Submit</button> </form> </template> <script> import { ref } from 'vue'; export default { setup() { const username = ref(''); const password = ref(''); const usernameError = ref(''); const passwordError = ref(''); const validateUsername = async () => { if (!username.value) { usernameError.value = 'Username is required'; } else { usernameError.value = ''; } }; const validatePassword = async () => { if (!password.value) { passwordError.value = 'Password is required'; } else { passwordError.value = ''; } }; const submitForm = async () => { await validateUsername(); await validatePassword(); if (!usernameError.value && !passwordError.value) { // Submit the form } }; return { username, password, usernameError, passwordError, submitForm, }; }, }; </script> ``` 在这个例子中，我们使用了 ref 来创建响应式的变量，然后定义了两个异步的验证函数 validateUsername 和 validatePassword，这些函数会根据输入的值设置相应的错误信息。 在 submitForm 函数中，我们使用了 await 来等待异步验证结果。如果两个验证都通过了，就可以提交表单了。 注意，需要使用 await 来等待异步验证结果，否则 submitForm 函数会在异步验证结果还未返回时就执行完毕，无法正确处理验证结果。

在vue3中的onMounted中使用async await请求接口数据的代码如下： ``` import { onMounted } from 'vue' export default { setup() { onMounted(async () => { try { const response = await fetch('https://example.com/api/data') const data = await response.json() console.log(data) } catch (error) { console.error(error) } }) } } ``` 在这个例子中，我们使用了Vue 3的`onMounted`钩子来在组件挂载后异步请求数据。我们使用了`async`和`await`关键字来处理异步操作，以确保我们在获取数据之前不会执行下一步操作。我们使用了`fetch`函数来发送请求，并使用`response.json()`方法将响应转换为JSON格式的数据。最后，我们将数据打印到控制台中，以便我们可以查看它们。