Async function does not work with Await

Question

I have the following set up where my main() function makes an AJAX call and calls getValue1() and getValue2() inside SUCCESS. I am learning how to use the keywords async and await

According to this SO post and this developer manual, the following code should work. However, it doesn't. Can someone tell me why?

async function main() {
  $.ajax({
      url: "...", 
      success: function (object) {
          var html = '';
          for (var i = 0; i < object.length; i++) {
              var value1 = await getValue1(object[i].value1);
              html += '<p>' + value1 + '</p>';

              var value2 = await getValue2(object[i].value2);
              html += '<p>' + value2 + '</p>';

              console.log(html);
          }
      }
  });
}

function getValue1(value1) {
  $.ajax({
      url: "...", 
      success: function (value1) {
          return value1;
      } 
  });
}

function getValue2(value2) {
  $.ajax({
      url: "...", 
      success: function (value2) {
          return value2;
      } 
  });
}

As far as I know you need to return a Promise in order for async/await to function properly. This code doesn't do that. — tadman, Aug 24 '17 at 14:57
^^^ stick a return in front of $.ajax in your getValue methods. — Taplar, Aug 24 '17 at 14:58
Not to say you have to mark function with `async` keyword to use await inside. I mean the one you are passing as a success callback. — Yury Tarabanko, Aug 24 '17 at 15:01
BTW your attempt to use `async/await` with (deprecated? or at least not recommended) `success` callback looks strange. — Yury Tarabanko, Aug 24 '17 at 15:04

score 2 · Answer 1 · answered Aug 24 '17 at 15:46

Firstly you need to put the async keyword in the same function where await is. And for this to work, you need to return Promise in your getValue1/2 functions.

The following code should work as it is, but note that:

all requests are processed simultaneously using Promise.all, so when they are all resolved it will log the result in console
I used let and const keywords, as I assumed that you use a recent version of JavaScript

You may need to take a look at the Promise's documentation to fully understand the code below.

function main() {
  $.ajax({
    url: 'https://api.ipify.org',
    success: function (object) {
      // this is for demonstration only:
      object = [
        {
          value1: 'https://api.ipify.org',
          value2: 'https://api.ipify.org',
        },
        {
          value1: 'https://api.ipify.org',
          value2: 'https://api.ipify.org',
        },
      ];
      // ^^^ remove this for your use

      // for some reasons, async callback in success won't work with jQuery
      // but using this self-calling async function will do the job
      (async function () {
        const requests = [];
        for (let i = 0; i < object.length; i++) {
          requests.push(getValue1(object[i].value1));
          requests.push(getValue2(object[i].value2));
        }

        // all requests are done simultaneously
        const results = await Promise.all(requests);

        // will print ["<your ip>", "<your ip>", ...]
        console.log(results);
      })();
    },
  });
}

function getValue1(param1) {
  // return a promise that resolve when request is done
  return new Promise(function (resolve, reject) {
    $.ajax({
      url: param1,
      success: resolve,
      error: reject,
    });
  });
}

function getValue2(param2) {
  // return a promise that resolve when request is done
  return new Promise(function (resolve, reject) {
    $.ajax({
      url: param2,
      success: resolve,
      error: reject,
    });
  });
}

// call main for testing
main();

As stated in the comments, this is for demonstration only. You can actually copy/paste this code to test it directly, but remove the "object = [...]" part for your own use. — Jonathan, Aug 24 '17 at 15:52

Async function does not work with Await

1 Answers1