How to wait for promise to resolve before resuming function execution

Question

I have a function that uses the geocoding api to turn a string(address/zip/city) into coordinates. I have another function that needs the coordinates returned from the geocoding api to call a different api that searches for events. However, I am new to async javascript and I am having trouble with async/await. The event api is saying that the coordinates that should return from the geocode api are undefined, but a few seconds later, the coordinates are returned. I need the event api to stop execution until the coordinates are returned from the geocoding api. Can somebody please point me in the right direction?

Here is the code for the two functions

function toLatLng(input) {
  $.ajax({
    type: "get",
    url: GEOCODE_API_URL + input,
    datatype: "json",
    success: (data) => {
      if(data.status === "OK") {
        return new Promise((resolve, reject) => {
          resolve(data.results[0].geometry.location);
        });
      }
      else if(data.status === "ZERO_RESULTS") {
        alert("The search yielded no results");
      }
      else {
        alert("Unable to search for events");
      }
    },
    error: (error) => {
      console.log(error);
    },
  });

async function getEvents(input) {
   let coordinates = await toLatLng(input);
   let queryStr = `&latlong=${coordinates.lat},${coordinates.lng}`
   $.ajax({
     type: "get",
     url: API_URL + queryStr,
     datatype: "json",
     success: (data) => {
       console.log(data);
     },
     error: (err) => {
       console.log(error);
     },
   });
 }

Answer 1

You can use 2 different approaches.

1. Return promise from toLatLng method like:

function toLatLng(input) {
  return new Promise((resolve, reject) => {
    $.ajax({
      type: "get",
      url: GEOCODE_API_URL + input,
      datatype: "json",
      success: (data) => {
        if (data.status === "OK") {
          resolve(data.results[0].geometry.location);
        } else if (data.status === "ZERO_RESULTS") {
          reject("The search yielded no results");
        } else {
          reject("Unable to search for events");
        }
      },
      error: (error) => {
        reject(error);
      },
    });
  });
}

async function getEvents(input) {
  toLatLng(input).then(coordinates => {
    let queryStr = `&latlong=${coordinates.lat},${coordinates.lng}`
    $.ajax({
      type: "get",
      url: API_URL + queryStr,
      datatype: "json",
      success: (data) => {
        console.log(data);
      },
      error: (err) => {
        console.log(error);
      },
    });
  }).catch(err => {
    console.log(err);
  });
}

2. Pass callback functions to toLatLng to call upon success or failure.

function toLatLng(input, successCallback, failureCallback) {
  $.ajax({
    type: "get",
    url: GEOCODE_API_URL + input,
    datatype: "json",
    success: (data) => {
      if (data.status === "OK") {
        successCallback(data.results[0].geometry.location);
      } else if (data.status === "ZERO_RESULTS") {
        failureCallback("The search yielded no results");
      } else {
        failureCallback("Unable to search for events");
      }
    },
    error: (error) => {
      failureCallback(error);
    },
  });
}

function onCoardinateLoaded(coordinates) {
  let queryStr = `&latlong=${coordinates.lat},${coordinates.lng}`
  $.ajax({
    type: "get",
    url: API_URL + queryStr,
    datatype: "json",
    success: (data) => {
      console.log(data);
    },
    error: (err) => {
      console.log(error);
    },
  });
}

function getEvents(input) {
  toLatLng(input, onCoardinateLoaded, onFailure);
}

function onFailure(message) {
  console.log(message);
}

Answer 2

There are a couple of mistakes in your code.

• Most importantly, a function that you want to be able to await needs to either return a promise, or be async itself (technically that's the same thing). Your geocode() function is neither async nor does it return anything, so it can't be awaited.
• Next, your geocode() function return value is way too specific. Don't make it return the "first result". Make it return all results. The calling code can decide whether it only wants to use the first one. This way your geocode() function becomes much more versatile.
• Next, your functions seem to be pasing raw query strings around to build URLs manually. Don't do that. Pass objects (key/value). jQuery will turn them into query strings when appropriate.
• If you use async/await, you should use try/catch at some point.
• Next, your functions can be condensed quite a bit.

Improved approach (jQuery version should be 3.0 or higher for this):

async function geocode(address) {
  var response = await $.get(GEOCODE_API_URL, {
    address: address,
    any: "other",
    parameters: "here",
    key: "YOUR_API_KEY"
  });
  if (response.status === "OK") return response.results;
  if (response.status !== "ZERO_RESULTS") console.log("geocode API status unexpected", response.status, response);
  return [];
}

async function getEvents(input) {
  var results = await geocode(input);
  if (!results.length) return;

  var coordinates = results[0].geometry.location;
  try {
    let data = await $.get(API_URL, {
      latlong: `${coordinates.lat},${coordinates.lng}`
    });
    console.log("getEvents SUCCESS", data);
  } catch (err) {
    console.log("getEvents ERROR", err);
  }
}