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

【问题标题】：how to download data from axios in advance in vue?vue中如何提前从axios下载数据？
【发布时间】：2021-07-24 15:24:54
【问题描述】：

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

【问题讨论】：

标签： javascript vue.js ionic-framework vuejs3 ionic5

【解决方案1】：

这个问题有点不清楚，也许不是最适合 SO，但我会尽力回答。

我在这里注意到的第一件事是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 调用 ApiService，间隔 3 秒，然后每 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);
      }
    }
  },

【讨论】：