vue中的async await用法举例说明
时间: 2023-08-08 17:10:45 浏览: 51
当在Vue中使用async/await时,可以在异步函数中进行等待操作,以便在异步操作完成后继续执行其他代码。下面是一个示例:
```vue
<template>
<div>
<button @click="fetchData">Fetch Data</button>
<p v-if="loading">Loading...</p>
<ul v-if="!loading">
<li v-for="item in data" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
data: [],
loading: false
};
},
methods: {
async fetchData() {
try {
this.loading = true;
const response = await this.$axios.get('https://api.example.com/data');
this.data = response.data;
this.loading = false;
} catch (error) {
console.error(error);
this.loading = false;
}
}
}
};
</script>
```
在上面的示例中,我们定义了一个名为`fetchData`的方法,该方法使用`async`关键字将其标记为异步函数。在方法内部,我们首先设置`loading`状态为`true`,以便显示加载提示。
然后,我们使用`await`关键字等待异步操作的完成。在这个例子中,我们使用了Vue的插件`$axios`来发送HTTP请求,并获取数据。注意,我们使用`try...catch`块来捕获可能发生的异常。
一旦异步操作完成,我们将获取到的数据赋值给`data`属性,并将`loading`状态设为`false`,以便隐藏加载提示。如果出现错误,我们将错误信息打印到控制台,并将`loading`状态设为`false`。
通过使用async/await,我们可以更清晰地编写异步代码,并处理异步操作的结果。