在 Vue 3 中,async
函数通常用于处理异步操作,例如从服务器获取数据或执行耗时任务。async
函数返回一个 Promise
,并且可以使用 await
关键字等待异步操作完成。下面是一个简单的例子,演示如何在 Vue 3 组件中使用 async
和 await
。
假设我们有一个 Vue 组件,它从 API 获取用户数据并在页面上显示。
<template>
<div>
<h1>User Information</h1>
<div v-if="loading">Loading...</div>
<div v-else-if="error">{{ error }}</div>
<div v-else>
<p>Name: {{ user.name }}</p>
<p>Email: {{ user.email }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
user: null,
loading: true,
error: null
};
},
async created() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
if (!response.ok) {
throw new Error('Failed to fetch user data');
}
this.user = await response.json();
} catch (err) {
this.error = err.message;
} finally {
this.loading = false;
}
}
};
</script>
<style>
/* 添加一些简单的样式 */
</style>
代码解析:
data
: 定义组件的状态,包括user
、loading
和error
。created
生命周期钩子: 在组件创建时调用created
钩子,这里用async
标记为异步函数。try...catch...finally
结构:- 在
try
块中,使用fetch
函数从 API 获取数据,并使用await
等待请求完成。 - 如果请求失败,会抛出错误并进入
catch
块,设置error
状态。 - 无论请求成功还是失败,
finally
块都会执行,设置loading
为false
。
- 在
- 模板渲染: 根据不同的状态显示内容,比如加载中状态、错误信息,或成功获取的数据。
这样,你就可以在 Vue 3 组件中使用 async
和 await
来处理异步操作了。