vue中如何提前从axios下载数据？

Question

在我的应用程序中，我需要运行我的应用程序离线，因为司机必须使用该应用程序，而在偏远地区，他们可能找不到为此目的的互联网我需要通过 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 插件可以帮助吗

Answer 1

这个问题有点不清楚，可能不是最适合的，但我会尽力回答。

我在这里首先注意到的是setInterval的使用，不是你在使用它，而是如何使用它。没有什么可以阻止运行的间隔。这是我希望能说明问题的场景

networkStatusChange 已触发：status.connected === true
setInterval 创建间隔#1
3 秒后间隔 #1 触发
...在接下来的 2 小时内一直发生这种情况
networkStatusChange 已触发：status.connected === false
...间隔#1 持续发射
networkStatusChange 已触发：status.connected === true
setInterval 创建间隔 #2
3 秒内间隔 #1 触发
3 秒后间隔 #2 触发
... 间隔#1 和#2 持续发射（两次在 3 秒内）
networkStatusChange 已触发：status.connected === false
networkStatusChange 已触发：status.connected === true
setInterval 创建间隔 #3
3 秒内间隔 #1 触发
3 秒间隔内 #2 触发
3 秒后间隔 #3 触发
... 间隔#1、#2 和#3 持续发射（三个在 3 秒内）

所以有两个问题。无论系统是否仍然连接，间隔都会持续触发。

您最好使用单个计时器每 3 秒触发一次，并在连接不可用时退出。这也允许使用 window.navigator.onLine，它有更好的浏览器支持。

我不知道你希望 worksheet 多长时间，但是如果你通过 setTimeout 3 秒间隔调用 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);
      }
    }
  },

vue中如何提前从axios下载数据？

how to download data from axios in advance in vue?

javascript

ionic-framework

vue.js

vuejs3

ionic5