Home > Enterprise >  javascript async await not waiting
javascript async await not waiting

Time:09-30

Here are the functions I have.

async function check_saved_url() {
  $.get("https://ipinfo.io/json", function (response) {
    current_ip = response.ip;
    location_here = response.country;
    
    var ajax_get_url_prefix = base_url   'getDomain.php?ip=';
    var key_ip = current_ip   '@@@'   domain_permanent;
    var url = ajax_get_url_prefix   key_ip;
    
    $.get(url, function(data, status) {
      console.log("Data: "   data   "\nStatus: "   status);
      if (data.includes('0 results')) {
        return 'unknown';
      } else {
        return data;
      }
    });
  }, "jsonp");
}

const func1 = async() => {
  return await check_saved_url();
}

const func2 = async() => {
  let domain_preference = '';
  domain_preference = await func1();
  console.log("domain_preference: ",domain_preference);
}
func2();

This method is from enter image description here

The top red line is the output of func2, which must wait until check_saved_url runs, whose result is the following 2 circles.

I am not sure why this persists to happen and hours of copying answers from everywhere didn't help me.

CodePudding user response:

Your function check_saved_url does not return a promise - this is why await is not working for it.

The solution would be to return a promise in check_saved_url.

Suppose I have a function create_promise which I want to await (this mimics your 'get' request):

function create_promise() {
  return new Promise(resolve => {
    setTimeout(() => resolve("Done!"), 500);
  });
}


const func1 = async() => {
  const result = await create_promise();
  return result   " <- result";
};

func1().then(console.log);

CodePudding user response:

You need to return a Promise from check_saved_url. Inside of the Promise, you then need to use resolve to replace return. You can also use reject(new Error("error")) if there was an error.

async function check_saved_url() {
  return new Promise((resolve, reject) => {
    $.get("https://ipinfo.io/json", function (response) {
      current_ip = response.ip;
      location_here = response.country;

      var ajax_get_url_prefix = base_url   'getDomain.php?ip=';
      var key_ip = current_ip   '@@@'   domain_permanent;
      var url = ajax_get_url_prefix   key_ip;

      $.get(url, function(data, status) {
        console.log("Data: "   data   "\nStatus: "   status);
        if (data.includes('0 results')) {
          // Instead of return, use resolve()
          //return 'unknown'; 
          resolve('unknown');
          // You can also pass an error with `reject(new Error("error"))`
        } else {
          // Instead of return, use resolve()
          //return data; 
          resolve(data);
        }
      });
    }, "jsonp");
  });
}

const func1 = async() => {
  return await check_saved_url();
}

const func2 = async() => {
  let domain_preference = '';
  domain_preference = await func1();
  console.log("domain_preference: ",domain_preference);
}
func2();

You can read more about promises on MDN

CodePudding user response:

I will suggest you to use fetch API check_saved_url(). It return promise. You can read more about it here. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Code will go like this :

async function check_saved_url() {
    let connect = await fetch("https://ipinfo.io/json")
    let response = await connect.json()
    current_ip = response.ip;
    location_here = response.country;
    
    var ajax_get_url_prefix = base_url   'getDomain.php?ip=';
    var key_ip = current_ip   '@@@'   domain_permanent;
    var url = ajax_get_url_prefix   key_ip;
      
    //   $.get(url, function(data, status) {
    //     console.log("Data: "   data   "\nStatus: "   status);
    //     if (data.includes('0 results')) {
    //       return 'unknown';
    //     } else {
    //       return data;
    //     }
    //   });
    // }, "jsonp");
  }

CodePudding user response:

There is no promise returned by check_saved_url nor is $.get returning a promise. You need to wrap it all in a promise

async function check_saved_url() {
    return new Promise((resolve, reject) => {
        $.get("https://ipinfo.io/json", function (response) {
            current_ip = response.ip;
            location_here = response.country;

            var ajax_get_url_prefix = base_url   'getDomain.php?ip=';
            var key_ip = current_ip   '@@@'   domain_permanent;
            var url = ajax_get_url_prefix   key_ip;

            $.get(url, function(data, status) {
                console.log("Data: "   data   "\nStatus: "   status);
                if (data.includes('0 results')) {
                    resolve('unknown');
                } else {
                    resolve(data);
                }
            })
                .fail(reject);
        }, "jsonp")
            .fail(reject);
    })
}

Clean the code

To have a cleaner and reusable code you can wrap $.get in a Promise

async function async_get(url) {
    return new Promise((resolve, reject) => {
        const jqxhr = $.get(url);
        jqxhr.done(() => resolve({ json: jqxhr.responseJSON, status: jqxhr.status }));
        jqxhr.fail(() => reject(jqxhr));
    })
}

async function check_saved_url() {
    const { json: response } = await async_get("https://ipinfo.io/json");
    current_ip = response.ip;
    location_here = response.country;
    var ajax_get_url_prefix = base_url   'getDomain.php?ip=';
    var key_ip = current_ip   '@@@'   domain_permanent;
    var url = ajax_get_url_prefix   key_ip;

    const { json: data, status } = await $.get(url);
    console.log("Data: "   data   "\nStatus: "   status);
    return data.includes('0 results') ? 'unknown' : data;
}
  • Related