how to download data from axios in advance in vue?

Issue

In my app, I need to run my app offline because drivers have to use that app and in remote areas, they might not find internet for that purpose I need to download all data in advance through Axios request at the time they have internet. so that request can get data from the cache instead of server.

At the moment i tried this but this doesn't seems to be good practice

  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);
        }
      });
    },

also for this, it is necessary for the user to behave on this page when the internet available it means that we need to download a lot of data.

Can you please tell me the best practice to do that or plugin for vue which can help for that

Solution

The question is sort of unclear and is not maybe the best fit for SO, but I'll try to answer.

The first thing I noticed here is the use of setInterval, not that you are using it, but rather how. There's nothing that stops the interval from running. Here's a scenario that I hope illustrates the problem

• networkStatusChange fired: status.connected === true
• setInterval creates interval #1
• 3 seconds later interval #1 fires
• ... this keeps happening for the next 2 hours
• networkStatusChange fired: status.connected === false
• ... interval#1 keeps firing
• networkStatusChange fired: status.connected === true
• setInterval creates interval #2
• within 3 seconds interval #1 fires
• 3 seconds later interval #2 fires
• ... intervals #1 and #2 keep firing (twice within 3 seconds)
• networkStatusChange fired: status.connected === false
• networkStatusChange fired: status.connected === true
• setInterval creates interval #3
• within 3 seconds interval #1 fires
• within 3 seconds interval #2 fires
• 3 seconds later interval #3 fires
• ... intervals #1, #2 and #3 keep firing (three within 3 seconds)

So there's two problems. The interval keeps firing regardless of whether the system is still connected.

You might be better of just firing every 3 seconds with a single timer, and exiting if the connection is not available. This also allows using window.navigator.onLine, which has much better browser support.

I don't know how long you expect worksheet to be, but if you have the ApiService called through setTimeout 3 seconds apart, and then call the parent function every 3 seconds, you're going to be sending a lot of requests.

  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);
      }
    }
  },

Answered By - Daniel