CODEWITHSUNDEEP
javascriptjqueryrestpromiseasync-await
RichP
RichP

Reputation: 525

Async/Await Not Waiting as I expect it

Please bear with me I've been dropped into a new project and trying to take it all in. I've been making progress over the last couple of day but can't seem to get over this last hump. Hopefully I can explain it correctly.

I'm loading up a web form and need to make a call out to the API to get some information that may or may not be present based on the data currently loading up. I've simplified my page to basically be this.

...Get some information the user wants and start to do some work to load 
up the page and set up the form.
...old stuff working fine...

//Time for my new stuff
var testValue
async function test() {
    await http.post(appConfig.serviceRootUrl + '/api/XXX/YYY', 
    { mProperty: myObject.collectionInObject.itemInCollection }).then(function (result) {
        if (result.length < 1) {
            testValue= false;
        }
        else if (result[0].infoIWant.trim().length > 0) {
            testValue= true;
        }
    });
}
test(); 

//Originally above in the if I was just seeing if I got a result 
//and setting testValue to true/false but changed it for debugging 
//and I am surely getting back correct values when the data exists 
//or result.length zero when no data for it


...Do a bunch of more stuff that is old and working correctly....

//Test the new stuff up above

 alert(testValue);

Most of the time I get back the correct true or false in the alert but once in a while I get back undefined. I'm guessing the undefined is because it is getting to the alert before the async/await finishes. I was under the impression it won't go past the line where I call "test();". I thought it was in effect making it halt anything below test(); until the await finished. Originally it was a bit more complex but I keep stripping it down to make it (hopefully) more basic/simple.

What am I missing in my thoughts or implementation?

Any help greatly appreciated as I'm chasing my tail at this point.

Upvotes: 1

Views: 6201

Answers (3)

Ram Budha
Ram Budha

Reputation: 180

How about doing this? 

...Get some information the user wants and start to do some work to load 
    up the page and set up the form.
    ...old stuff working fine...

    //Time for my new stuff
    var testValue
    async function test() {
       let promise = new Promise( (resolve, reject) => resolve( http.post(appConfig.serviceRootUrl + '/api/XXX/YYY', 
        { mProperty: myObject.collectionInObject.itemInCollection }).then(function (result) {
            if (result.length < 1) {
                testValue= false;
            }
            else if (result[0].infoIWant.trim().length > 0) {
                testValue= true;
            }
        })));
     await promise;
 alert(testValue);
    }
    test(); 

    //Originally above in the if I was just seeing if I got a result 
    //and setting testValue to true/false but changed it for debugging 
    //and I am surely getting back correct values when the data exists 
    //or result.length zero when no data for it


    ...Do a bunch of more stuff that is old and working correctly....

    //Test the new stuff up above

Upvotes: 2

Liz Ainslie
Liz Ainslie

Reputation: 31

If you use .then() syntax, don't await, and vice versa. I was incorrect about browser compatibility with async/await, seems I haven't kept up with browser scripting, in favor of Node. But also, since you're using jQuery, $.ajax() might be a good option for you, because you don't need async/await or .then(), and you can do like so:

$.ajax(appConfig.serviceRootUrl + '/api/XXX/YYY', {
    method: 'POST',
    data: { mProperty: myObject.collectionInObject.itemInCollection }
}).done(function(data) {
    //use result here just as you would normally within the `.then()`
})

I hope this is more helpful than my original answer.

Upvotes: -6

Mark
Mark

Reputation: 92440

This isn't how async functions work. The function only appears to wait inside the function itself. Outside the function it is called and returns a promise synchronously.

In other words if you write:

 let t = test()

t will be a promise that resolves when test() returns. In your current code, if you want to respond outside the function you would need something like:

async function test() {
    let result = await http.post(appConfig.serviceRootUrl + '/api/XXX/YYY', 
    { mProperty: myObject.collectionInObject.itemInCollection })
    if (result.length < 1) return false
    else if (result[0].infoIWant.trim().length > 0)  return true;
}


// test is an async function. It returns a promise.
test().then(result => alert("result: " + result ))

Edit based on comments
Here's a working version using Axios for the http.post command:

async function test() {
    let result = await axios.post('https://jsonplaceholder.typicode.com/posts', 
    { mProperty: "some val" })
    return result.data
}


// test is an async function. It returns a promise.
test().then(result => console.log(result ))
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

Upvotes: 5

Related Questions