Axios not returning promise, not synchronous

Question

In my react app, I am making an axios call within a for each loop however, the program doesn't wait for the response of the GET request but rather it executes the next part of the program. When it eventually resolves the promise it is too late. How do I pause the execution of the program until axios has returned from its request.

In a nutshell I need axios to return the result and then continue to run the rest of the program in a synchronous manner.

I have tried using the async/await options however, it doesn't seem to do the trick. I need Axios to run synchronously.

pids.forEach((i1) => loadedContent.forEach((i2, idx) => {
  if (i1 === i2.available_versions.version[0].pid || i1 ===
    i2.versionPid) {
    axios.get(`https://programmes.api.hebel.com/dougi/api/versions?
    anshur${i1}`).then((response) => {
      xml2js.parseString(response.data, function(err, result) {
        loadedContent[idx].nCrid =
          result.gui.results[0].vastilp[0].roundup[0].identifier[0]._
        alert(loadedContent[idx].nCrid)
        //Need it to go into here, however it is bypassing this and 
        continuing
        //on to line 111
      });

    }).catch(e => {
      console.log('error', e);
    });

  }
}))

I expect axios to run synchronously, or at the very least wait until the promise has been resolved before continuing on.

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Randy Casburn, Jun 09 '19 at 21:54
In general, Axios responses are going to be asynchronous, especially since [synchronous requests](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Synchronous_request) in the main thread are deprecated and you must use a Worker. — Jhecht, Jun 09 '19 at 21:57

iliya.rudberg · Answer 1 · 2019-06-09T22:04:53.330

You can use bluebirds Promise.map method to execute your async code synchronously. Foreach is synchronized function so it's ok that's next loop is starting before first one is ended. Also you can use async await to exec it in a correct order. That's how i will make it with async await and Promise.map:

await Promise.map(pids, async i1 => {
    await Promise.map(loadedContent, async (i2, idx) => {
        if (i1 === i2.available_versions.version[0].pid || i1 ===
            i2.versionPid) {
            const response = await axios.get(`https://programmes.api.hebel.com/dougi/api/versions?
            anshur${i1}`);
            xml2js.parseString(response.data, function (err, result) {
                loadedContent[idx].nCrid =
                    result.gui.results[0].vastilp[0].roundup[0].identifier[0]._
                alert(loadedContent[idx].nCrid)
            });
        });
});

score 0 · Answer 2 · answered Jun 09 '19 at 22:02

0

Doing an asynchronous call would effectively 'pause' the execution until the value is available. With the way your program is currently written with .then(), why don't you try it with fetch?

answered Jun 09 '19 at 22:02

M_Falg

11
2

Axios not returning promise, not synchronous

2 Answers2