How do I turn a javascript ajax caller function into async/await?

Question

Let's say I have the following function getData

getData = (param) => {
    // jquery
    $.ajax(...).done(..)
}

How do I turn getData into a blocking function so that refreshPage only gets called after the ajax within getData is done?

data = getData(..)
refreshPage()

Please note: I don't want to pass refreshPage into the ajax callback within getData

OK... here is what I tried and seems working:

getData = (param) => {
    // jquery
    return $.ajax(...).done(..)
}
getData.then(refreshPage())

`getData` cannot be a blocking function, unless you make AJAX synchronous (which is a very bad idea). `await getData(...)` can be made quasi-blocking, if the containing function is `async` (by making `getData` return a promise). Is that what you mean? — Amadan, Jun 18 '19 at 04:05
Just wrap it in a `Promise` that resolves when you get the data? — jhpratt, Jun 18 '19 at 04:06
@jhpratt There's no point in wrapping it in promise, `$.ajax` already returns a perfectly nice one (assuming `$` is jQuery). — Amadan, Jun 18 '19 at 04:07
And given no mention of jQuery, I haven't assumed that. Conversion from a `Promise` to `async`/`await` certainly has a million dupes by itself. — jhpratt, Jun 18 '19 at 04:08
I mean, `$`, followed by `ajax` followed by `done` is highly likely to be jQuery or jQuery-like — Avin Kavish, Jun 18 '19 at 04:11
Assuming $.ajax() is jQuery is a pretty straightforward assumption @jhpratt. Simply using `async / await` should do the trick. — Gaurav Punjabi, Jun 18 '19 at 04:11

score 3 · Accepted Answer · answered Jun 18 '19 at 04:16

3

function getData = (param) => {
    // jquery
    return $.ajax(...);
}

async test() {
    var x = await getData()
    console.log(x)
}

answered Jun 18 '19 at 04:16

Ziv Ben-Or

1,149
6
15

This is pretty close to what I have tried,which I used `getData().then(..)`, I cannot verify if using `await getData()` because webpack throws error on me. – James Lin Jun 18 '19 at 04:22

score 1 · Answer 2 · answered Jun 18 '19 at 04:14

1

getData = (param) => $.ajax(...).done(..)

getData().done(() => refreshPage())
// or
getData().done(refreshPage)

answered Jun 18 '19 at 04:14

Avin Kavish

8,317
1
21
36

score 1 · Answer 3 · answered Jun 18 '19 at 04:17

1

You may try the following:

function getData (param)
{
   ...........       
   return new Promise((resolve, reject) =>{
        jQuery.ajax({...});
   });
}
...........

getData(param).then(()=>refreshPage());

answered Jun 18 '19 at 04:17

The KNVB

3,588
3
29
54

The combination of this answer and @Zlv Ben-Or is working. – James Lin Jun 18 '19 at 04:22

score 0 · Answer 4 · answered Jun 18 '19 at 04:12

0

you should return a promise from your get data method

getData = (param) => {
    return new Promise(function(resolve, reject) {
   }
}

then when things are done in ajax called resolve(data) there

answered Jun 18 '19 at 04:12

Syed Afzal

150
1
8

1

Please read the comments. The method already returns a promise. – jhpratt Jun 18 '19 at 04:12
Let me it if it is cleared to you or I post the proper code – Syed Afzal Jun 18 '19 at 04:14

How do I turn a javascript ajax caller function into async/await?

4 Answers4