I have an API to call every 2.5 seconds. Initially, the data inside the response object is null as the database is still updating it through a transaction. But on the subsequent 3rd or 4th try, I get the data. I am writing a reusable function for the same, however I get undefined. My goal is to keep calling the API until I get the value in my path and close the connection. Please advice.

P.S: The below API URL doesnt have any delay, but my private API has.

const getData = (url, path) => {
  const interval = setInterval(async () => {
    const result = await axios.get(url);
    if (_.has(result.data, path) && result.data[path]) {
      return result[path]
    }
  }, 2500)
  return clearInterval(interval)
}

getData('.json', 'swaggerVersion')

<script src=".js/4.17.15/lodash.js"></script>

I have an API to call every 2.5 seconds. Initially, the data inside the response object is null as the database is still updating it through a transaction. But on the subsequent 3rd or 4th try, I get the data. I am writing a reusable function for the same, however I get undefined. My goal is to keep calling the API until I get the value in my path and close the connection. Please advice.

P.S: The below API URL doesnt have any delay, but my private API has.

const getData = (url, path) => {
  const interval = setInterval(async () => {
    const result = await axios.get(url);
    if (_.has(result.data, path) && result.data[path]) {
      return result[path]
    }
  }, 2500)
  return clearInterval(interval)
}

getData('https://api.oceandrivers./static/resources.json', 'swaggerVersion')

<script src="https://cdnjs.cloudflare./ajax/libs/lodash.js/4.17.15/lodash.js"></script>

JS Fiddle URL

Please advice.

• javascript
• async-await
• setinterval

• Because JS is asynchronous and you are clearing interval. There's no block like linear programming languages ( most times ). – Vahid Alimohamadi Commented Jun 22, 2020 at 18:30

3 Answers 3

You

return clearInterval(interval); // undefined

If you want to return a Promise which will resolve when the data is available, you could do something like this:

const getData = (url, path) => {
  return new Promise((resolve, reject) => {
    const interval = setInterval(async() => {
      const result = await axios.get(url);
      if (_.has(result.data, path) && result.data[path]) {
        clearInterval(interval); // Clear the interval
        resolve(result.data[path]); // Resolve with the data
      }
    }, 2500);
  });
}

getData('https://api.oceandrivers./static/resources.json', 'swaggerVersion')
  .then(data => {
    console.log(data); // Your data is available here
  });

// OR

(async () => {
  const version = await getData('https://api.oceandrivers./static/resources.json', 'swaggerVersion');
  console.log(version);
})();

You could create an asynchronous delay:

const delay = milliseconds => new Promise(resolve, setTimeout(resolve, milliseconds));

Then use like this:

const getDataAsync = async (url, path) => {
    while (true) {
        const result = await axios.get(url);
        if (_.has(result.data, path) && result.data[path]) {
            return result.data[path];
        }
        await delay(2500);
    }
}

const data = await getDataAsync('https://api.oceandrivers./static/resources.json', 'swaggerVersion');

This avoids the multiple layers of nested callbacks, and produces much more readable code.

Its because javascript is asynchronous as above ment is already mentioned. You can use either callbacks or promise in javascript. Here is the code:

const getData = (url, path, cb) => {
  const interval = setInterval(async () => {
    const result = await axios.get(url);
    if (_.has(result.data, path) && result.data[path]) {
     clearInterval(interval); //We found it remove the interval
      cb(result.data[path]);
    }
  }, 2500);
};

getData(
  "https://api.oceandrivers./static/resources.json",
  "swaggerVersion",
  data => {
    console.log("test",data);
  }
);

Here is the fiddle: https://jsfiddle/7pc4hq6t/3/