Vue.js 通过 Axios 发送 get 请求时触发加载动画
时间: 2023-10-10 21:09:44 浏览: 48
可以通过在发送请求前设置一个 loading 标志位,然后在请求结束后将其设置为 false,同时在页面上显示一个加载动画来实现:
```
<template>
<div>
<div v-if="loading">Loading...</div>
<div v-else>
<!-- 页面内容 -->
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
loading: false,
data: null
}
},
methods: {
fetchData() {
this.loading = true;
axios.get('/api/data')
.then(response => {
this.data = response.data;
})
.catch(error => {
console.log(error);
})
.finally(() => {
this.loading = false;
});
}
}
}
</script>
```
在上面的代码中,我们使用了一个 loading 标志位来表示当前是否正在加载数据,如果正在加载,则显示加载动画,否则显示页面内容。在发送请求前设置 loading 为 true,在请求结束后设置为 false,这样就能实现在发送请求时触发加载动画。