Vue如何请求一个多次请求一个接口怎么写
时间: 2024-01-30 08:03:54 浏览: 154
如果你需要多次请求同一个接口,可以使用Vue的生命周期函数和axios来实现。以下是一个简单的示例:
```javascript
<template>
<div>
<p v-for="(data, index) in dataList" :key="index">{{ data }}</p>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
dataList: [],
};
},
mounted() {
this.fetchData();
},
methods: {
fetchData() {
for (let i = 0; i < 3; i++) { // 请求3次接口
axios.get('/api/data').then((response) => {
this.dataList.push(response.data);
}).catch((error) => {
console.log(error);
});
}
},
},
};
</script>
```
在上面的代码中,我们使用了Vue的mounted生命周期函数来调用fetchData方法,在fetchData方法中使用了一个for循环来请求3次接口,每次请求成功后将数据push到dataList中。在模板中使用v-for指令将dataList中的数据渲染到页面上。
当然,要注意服务器的接口是否支持多次请求,以及一些其他的异常处理。
阅读全文