Await to AJAX call doen't work as expected - ajax

Question

I have the following two functions:
function scan_request(address, file_url) {
$.ajax({
type: "POST",
async: true,
crossDomain: true,
url: 'http://some_site/api/file/scan',
dataType: "text",
success: function (data, textStatus, jqXHR) {
var json = $.parseJSON(data);//get json response and parse it
$(json).each(function (i, val) {//extract data from json
$.each(val, async function (key, value) {
if (key.toLowerCase() == "jobid") {
var result = await query_request();
alert("result:" + result);
}
});
});
}
});
}
async function query_request() {
var settings = {
"async": true,
"crossDomain": true,
"url": 'http://some_site/api/file/query',
"method": "POST"
}
var res;
$.ajax(settings).then(function (response) {
alert("response: " + response);
res = response;
});
return res;
}
It first alerts result: undefined
and after it alerts: response: [object Object]
But I'm expecting for:
First alert response: [object Object]
And after alert result: [object Object]
It seems like it doesnt wait to the call: var result = await query_request(); and therefore the result is undefined and the alert appears before the inner alert, what am I missing?

Answer 1

You can only await a promise. (Or a function that returns a promise.)
Your query_request() should return the promise that is created by $.ajax(). And since it does not need to await anything itself, it does not need to be marked as async.
// returns a promise, i.e. can be awaited in caller
function query_request(value) {
return $.ajax({
crossDomain: true,
url: 'http://some_site/api/file/query',
method: "POST",
data: {jobid: value}
});
}
Now you can await the result of query_request() inside an async function:
$(json).each(function (i, val) {
$.each(val, async function (key, value) {
if (key.toLowerCase() == "jobid") {
var result = await query_request(value);
alert("result:" + result);
}
});
});
However, this code has a problem - it dasiy-chains the requests inside the loop, when they all could actually be running in parallel. This means it's slower than it needs to be.
Shifting the approach a bit, we can make sure that the Ajax requests are running in parallel instead of one after another:
async function (data, textStatus, jqXHR) {
var todo = [], pending, results;
// make a list of all the things we want to request
$(json).each(async function (i, val) {
$.each(val, function (key, value) {
if (key.toLowerCase() == "jobid") todo.push(value);
});
});
// request them all in parallel (=> array of promises)
pending = todo.map(query_request);
// wait for all of the results
results = await Promise.all(pending)
// ...now work with the results
}