How To Use Js Async/await To Wait For Ajax Response

I'm working with async/await functions in Javascript for the first time. I'm having trouble getting my script to wait for an AJAX response before proceeding and then reading/using

Solution 1:

Two things here: - Your getRecord function does not return a Promisetherefore, the await doesn't wait for anything - forEachcannot work with async functions, as the implementation does not await.

For the first problem you can solve it by doing:

asyncfunctiongetRecord(cell_date) {
    return $.ajax({
        url: 'rec/getRecord/'+cell_date,
        type: 'get',
        dataType: 'json',
    })
    .then(response => response.data);
}

For the second problem, you can do it by running a loop this way:

asyncfunctiontestAsyncAwaitFunction() {
    let layerNames = awaitgetCellLayers();
    for (layerName of layerNames) {

        cell_date = layerName.substring(3)+"_"+window['currentImage'].substring(17,25);
        console.log(cell_date+":");
        let cellRecord = awaitgetRecord(cell_date);
        console.log("Matches: "+cellRecord.length);
        console.log("testAsyncAwaitFunction response: "+JSON.stringify(cellRecord));

    }
}

But doing this makes everything run one by one. You could do even better by sending the requests and then waiting for all of them to complete using Promise.all this way:

const promises = []
for (layerName of layerNames) {
        cell_date = layerName.substring(3)+"_"+window['currentImage'].substring(17,25);
        console.log(cell_date+":");
        promises.push(getRecord(cell_date));
}
const records = awaitPromise.all(promises)

Solution 2:

change getRecord to this

functiongetRecord(cell_date) {
    return $.ajax({
        url: 'rec/getRecord/'+cell_date,
        type: 'get',
        dataType: 'json'
    }).then(function(response){
      console.log("getRecord response: "+JSON.stringify(response));
      return response['data'];
  });
}

And remove both the async and await keywords from everywhere in your code except in the testAsyncAwaitFunction in these two parts:

async function testAsyncAwaitFunction()

and

let cellRecord = await getRecord(cell_date);

Otherwise you don't need them.

It wouldn't have worked before because your function needs to return a promise containing the data. You should read up on JavaScript promises. Async/Await is largely syntactic sugar for these and used to handle async code. The only actual async code you have is the call to getRecord.

Solution 3:

The thing to remember about async is that any function prepended with async is expected to return a Promise. getRecord should return what you have. Also, while your outer function testAsyncAwaitFunction is async, and your forEach callback is async, you do not have anything waiting for ALL the promises of your forEach to resolve.

You want this pattern:

asyncfunctiontestAsyncAwaitFunction() {
    let layerNames = awaitgetCellLayers();
    const promises = [];
    layerNames.forEach(function(layerName) {
        promises.push(getRecord(cell_date));
    });
    const cell_records = awaitPromise.all(promises);
    cell_records.forEach(function(cell_record, idx) {
        cell_date = layerNames[idx].substring(3)+"_"+window['currentImage'].substring(17,25);
        console.log(cell_date+":");
        console.log("Matches: "+cellRecord.length);
        console.log("testAsyncAwaitFunction response: "+JSON.stringify(cellRecord));
    })
}