vue3+ts每隔5秒调用接口
时间: 2023-11-24 21:06:09 浏览: 99
你可以使用 `setInterval` 方法来实现每隔5秒调用接口的功能,具体实现如下:
```typescript
import { ref, onMounted, onUnmounted } from 'vue'
import axios from 'axios'
export default {
setup() {
const data = ref<any>(null)
const getData = () => {
axios.get('your/api/url').then(response => {
data.value = response.data
})
}
let timer: NodeJS.Timeout | undefined
onMounted(() => {
timer = setInterval(() => {
getData()
}, 5000)
})
onUnmounted(() => {
if (timer) {
clearInterval(timer)
}
})
return { data }
}
}
```
上面的代码中,我们通过 `ref` 来定义一个响应式变量 `data`,用来保存接口返回的数据。然后定义了一个 `getData` 方法用来发送请求获取数据。接着在 `onMounted` 生命周期中使用 `setInterval` 方法来每隔5秒调用一次 `getData` 方法。最后在 `onUnmounted` 生命周期中清除定时器。
阅读全文