0

I wanted to run 2 functions simultaneously in VUE. One function will be called when component is mounted and it will be running every 10 seconds. The other function will start executing when we click on the button. Now my problem is when I click the button the function start executing and the first function will not be called till this function completed its execution.

<template>
  <div>
    <select v-model="file_id" class="form-control" id="">
      <option v-for="(file, index) in files" :value="file.value" :key="index">
        {{ file.label }}
      </option>
    </select>
    <button class="btn btn-success" @click="handleFileUpload">Import</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [],
    };
  },
  mounted() {
    this.upload_status = setInterval(() => {
      this.getUploadedStatus();
    }, 5000);
  },
  methods: {
    handleFileUpload() {
       //it will start executing when we click the button (need to call API)
       axios.post();
    },
    getUploadedStatus() {
        //it has to run every 10 seconds (Need to call API)
        axios.get();
    },
    beforeDestroy() {
      clearInterval(this.upload_status);
    },
  },
};
</script>
N69S
  • 16,110
  • 3
  • 22
  • 36
matheen ulla
  • 526
  • 7
  • 27
  • What evidence do you have that " the function start executing and the first function will not be called till this function completed its execution" nothing about your code suggests that upload_status() ought to be awaiting handleFileUpload() – WillD Sep 22 '22 at 13:29
  • because first function will take more than 2 minutes. I tried logging out for 2 function. – matheen ulla Sep 22 '22 at 13:30
  • You can't Javascript implementations in browsers are single threaded and always run sequencially, no matter what. "Concurrent" functions calls are actually queued and called one after another, as you're seeing. – Alejandro Sep 22 '22 at 13:30
  • @Alejandro Any solutions for this? how we can achieve this? – matheen ulla Sep 22 '22 at 13:33
  • So you're saying handleFileUpload blocks the main thread for more than two minutes? – WillD Sep 22 '22 at 13:59
  • 3
    It doesn't work the way you described it, unless you chained promises from these functions, but you didn't. Both setInterval and network calls are asynchronous and don't block the execution. A backend or browser could stall on these requests but this won't prevent functions from being called. The problem is not reproducible. If it persists, please, provide https://stackoverflow.com/help/mcve for it – Estus Flask Sep 22 '22 at 14:10
  • @WillD yeah it will stop the function execution which is executing every 5 seconds. – matheen ulla Sep 22 '22 at 14:20
  • @EstusFlask can u have any examples chained promises? – matheen ulla Sep 22 '22 at 14:21
  • Put a console log statement within getUploadedStatus to see if it is firing during the 2 minute blockage from clicking the button. I suppose it's possible that your AJAX call is stalling if, for example, your server was only capable of handling one incoming request at a time. But that shouldn't stop the javascript function getUploadedStatus from firing. – WillD Sep 22 '22 at 14:27
  • @WillD I tried doing that actually the function is getting called but i'm not getting response from API. – matheen ulla Sep 22 '22 at 14:35
  • Something like https://stackoverflow.com/questions/44182951/axios-chaining-multiple-api-requests , but not specifically. You just need to learn how to use promises . It's unknown why you don't get a response from api because it's unknown which api is it, and there's no code that handles a response in the question – Estus Flask Sep 22 '22 at 14:51
  • 1
    Your problem seems to be entirely backend related: server seems incapable of responding to a new request while another request keeps it busy. I suggest you update the question accordingly. Users shouldn't have to read the entire comment thread to understand the question. – tao Sep 22 '22 at 15:53
  • @tao Yeah your right. But how to solve this issue? any suggestion – matheen ulla Sep 22 '22 at 15:59
  • 1
    I'm not so knowledgeable in backend technology. But the one suggestion I have is to provide relevant information on what server you're using, tag the question with appropriate tags so that people more knowledgeable in those technologies can get visibility on your question. Fingers crossed. – tao Sep 22 '22 at 16:03

0 Answers0