在我的应用程序中，我需要离线运行应用程序，因为司机必须使用该应用程序，而在偏远地区，他们可能找不到互联网。我需要在他们上网时通过Axios请求提前下载所有数据。以便请求可以从缓存而不是服务器获取数据。
目前我尝试了这个，但这似乎不是一个好的做法
tryOffileWorkSheet: async function () {
Network.addListener("networkStatusChange", (status) => {
if (status.connected) {
setInterval(function () {
let worksheet = JSON.parse(localStorage.getItem("worksheet"));
if (worksheet == null) {
worksheet = [];
}
// localStorage.removeItem('worksheet')
for (let i = 0; i <= worksheet.length; i++) {
if(worksheet.length > 0){
setTimeout(function () {
if(worksheet[i]?.work_order_id){
ApiService.get(
`/api/gangBoss/work-sheet/${worksheet[i].work_order_id}/${worksheet[i].column_name}/${worksheet[i].value}`
).then((response) => {
if(response.data.status){
worksheet.splice(i,1)
localStorage.setItem("worksheet", JSON.stringify(worksheet));
}
console.log('After', worksheet)
// this.closeModal();
});
}
},i* 3000);
}
}
}, 3000);
}
});
},
同样，当互联网可用时，用户有必要在这个页面上表现出来，这意味着我们需要下载大量数据。
你能告诉我最好的做法吗？或者vue插件可以帮助
这个问题有点不清楚，可能不是最适合SO的，但我会尽力回答。
我在这里注意到的第一件事是setInterval的使用，不是你在使用它，而是如何使用。没有什么能阻止间歇跑。下面是一个我希望能说明问题的场景
- 网络状态更改已启动：
status.connected === true - setInterval创建间隔#1
- 间隔3秒后#1点火
- 。。。在接下来的两个小时里，这种情况一直在发生
- networkStatusChange已启动：
status.connected === false - 。。。1号区间持续开火
- networkStatusChange已启动：
status.connected === true - setInterval创建间隔#2
- 间隔3秒内1号火灾
- 3秒后间隔#2点火
- 。。。间隔#1和#2保持发射(在3秒内两次(
- 网络状态更改已启动：
status.connected === false - networkStatusChange已启动：
status.connected === true - setInterval创建间隔#3
- 间隔3秒内1号火灾
- 间隔3秒内发生#2火灾
- 3秒后间隔#3点火
- 。。。间隔#1、#2和#3保持发射(3秒内三次(
所以有两个问题。无论系统是否仍连接，间隔都会持续激发。
你最好用一个定时器每3秒启动一次，如果连接不可用，就退出。这也允许使用window.navigator.onLine，它具有更好的浏览器支持。
我不知道worksheet需要多长时间，但如果您每隔3秒通过setTimeout调用ApiService，然后每3秒调用一次父函数，那么您将发送大量请求。
tryOffileWorkSheet: function () {
// (need to create `intervalId` in data)
if (this.intervalId) clearInterval(this.intervalId);
this.intervalId = setInterval(() => {
if (window.navigator.onLine) {
this.getWorkSheet();
}
}, 3000);
},
getWorkSheet: function () {
let worksheet = JSON.parse(localStorage.getItem("worksheet"));
if (worksheet == null) {
worksheet = [];
}
for (let i = 0; i <= worksheet.length; i++) {
if (worksheet.length > 0) {
setTimeout(() => {
if (worksheet[i]?.work_order_id) {
ApiService.get(
`/api/gangBoss/work-sheet/${worksheet[i].work_order_id}/${worksheet[i].column_name}/${worksheet[i].value}`
).then((response) => {
if (response.data.status) {
worksheet.splice(i, 1);
localStorage.setItem("worksheet", JSON.stringify(worksheet));
}
console.log("After", worksheet);
});
}
}, i * 300);
}
}
},