你好,我有一个问题:在main.js中,我有一个全局函数getSites,用于从API检索站点列表。
这个函数使用async/await工作,并异步返回站点数据。
我还有一个全局变量叫做lockSitesLoading,当我开始从API获取数据时,我将其设置为true,我需要这个变量来防止客户端向服务器发出新请求。
在第一个函数getSites中,我需要检查这个变量lockSitesLoading,如果它为true,就开始监视它直到它变为false。在这一点上,我想递归调用getSites。
问题现在开始了,因为当我开始监视变量时,这个函数并不等待变量变为false,而是返回undefined。
这里是我的代码:
组件.vue:
async mounted() {
let vm = this;
const sites = await vm.getSites();
vm.sites = sites.data
},
main.js:
async getSites() {
let vm = this;
if (vm.$store.state.lockSitesLoading) {
vm.$watch('$store.state.lockSitesLoading', () => vm.getSites());
} else {
return vm._getSitesOnline();
//这是实际从服务器获取数据的函数
}
我尝试以这种方式解决,但不起作用。有什么想法吗?
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
基本上需要一个等待的承诺:
let unwatch; await new Promise(resolve => { unwatch = vm.$watch('$store.state.lockSitesLoading', loading => { if (!loading) { resolve(); } }, { immediate: true }); }); unwatch(); await vm._getSitesOnline();请注意,如果
lockSitesLoading由于某种原因阻止执行,这将导致内存泄漏。使用组合API和VueUse组合式可能有更简洁的方法来实现这一点。