Vue.js async/await with then function not executing

Question

I'm attempting to use async/await with axios.then() within a for of loop. The function fails to run or even attempt the axios call. I have a feeling using the then() function is part of the problem.

I need the for loop to wait until the then() function has run before continuing on to the next array item. Any ideas how I can alter my code to get the axios.then() functions to run asynchronously?

accounts = [{a},{b},{c}, ...] // Example of accounts array

async function get_user_data (accounts) {
  // For of loop
  for (let [index, user] of accounts.entries()) {
    // Currently using await before axios call
    await axios.get(url, headers)
      .then(function(data) {
        console.log(data)
      })
      .catch(function(error) {
        console.log(error)
      })
  }
}

UPDATE:

Issue was ultimately being caused by the Vue frontend compiling my application. Resolved by following the stack overflow solution posted here. Note, that the code now functions as expected. The solution offered by Dacre Denny helped me decide the issue must be located somewhere else as his should have worked but did not until the problem with Vue was solved. Takeaways:

Use simple tests to confirm issue not with code
Check webpack, babel, and other compiler configs if above doesn't work

I don't think sending http request inside for loop is a good idea. — Christhofer Natalius
– Christhofer Natalius, Commented Jun 25, 2019 at 3:00
Possible duplicate of What's wrong with awaiting a promise chain? — dwjohnston
– dwjohnston, Commented Jun 25, 2019 at 3:24
This for loop will already wait for the .then() to run before continuing. If you think it isn't, then it's probably because whatever asynchronous stuff you're doing inside the .then() handler isn't returning a promise so it can link into the chain. Show us your code for what's inside the .then() handler and we can more likely help you. — jfriend00
– jfriend00, Commented Jun 25, 2019 at 3:33
FYI, you don't put answers into your question here. You put answers in answers and questions in questions. So, since you've already posted your own answer (which is allowed here), then you should remove the answer stuff from the question. It doesn't belong there. After some time passes, you can "accept" your answer too. — jfriend00
– jfriend00, Commented Jun 25, 2019 at 3:45
Given that the issue isn't in the question, the issue–causing agent (Vue.js) isn't tagged and the solution is in another post, either update the title and mark this question as a duplicate, or delete it. — RobG
– RobG, Commented Jun 25, 2019 at 4:15

Dacre Denny · Accepted Answer · 2019-06-25 03:22:18Z

2

In general, it is considered an anti-pattern to mix the promise interface (ie .then()) with await/async semantics.

Seeing that the get_user_data function is defined async, consider a revised implementation based on a try/catch block for clearer program flow and greater predictability in the asynchronous behaviour of your loop:

async function get_user_data (accounts) {
  for (let [index, user] of accounts.entries()) {

    /* try/catch block allows async errors/exceptions to be caught
    without then need for a .catch() handler */
    try {    

        /* Using await, the response data can be obtained in this 
        way without the need for a .then() handler */
        const data = await axios.get(url, headers)
        console.log(data);
    }
    catch(error) {

        /* If an error occurs in the async axios request an exception
        is thrown and can be caught/handled here */
        console.log(error)
    }
  }
}

edited Jun 25, 2019 at 3:22

answered Jun 25, 2019 at 2:58

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jfriend00 Over a year ago

This doesn't, by itself, solve whatever problem the OP had because the OP's code already was waiting for the .then() handler to run. One can argue about the "style" of using await and .then(), but that isn't causing whatever problem the OP has.

Jason · Accepted Answer · 2019-06-25 03:43:25Z

0

Thanks to Dacre Denny for the quick help. His test code helped me determine the problem was not with the code.

The Issue was ultimately being caused by the Vue frontend compiling my application which does not at this date support async/await out of the box. Resolved by following the stack overflow solution posted here. Note, that the code now functions as expected. Takeways:

Use simple tests to confirm issue not with code
Check webpack, babel, or other compiler configs if above doesn't work
A lack of errors when function fails to run may indicate a compilation error. Check configs.

edited Jun 25, 2019 at 3:43

answered Jun 25, 2019 at 3:41

Jason

5857 silver badges16 bronze badges

Comments

Bhavik Tarpara · Accepted Answer · 2019-06-25 08:41:41Z

0

  async get_user_data(accounts) {
        // For of loop
        (async() => {
            for (let [index, user] of accounts.entries()) {
                // Currently using await before axios call
                await axios.get(url, headers)
                    .then(function(data) {
                        console.log(data)
                    })
                    .catch(function(error) {
                        console.log(error)
                    })
            }
        })();
    },

answered Jun 25, 2019 at 8:41

Bhavik Tarpara

724 bronze badges

Collectives™ on Stack Overflow

Vue.js async/await with then function not executing

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related