.js function returing undefined after async request

Question

One of those issues that you would think should just work....

I have this function:

  const getNextValue = function() {
    var result = queryFunction();
    console.log('test');
    return result;
  }

Query function is imported from another file:

import {
  queryFunction ,
} from "./util/interact.js";

That function sets a request out to a firebase function, which (to the best of my knowledge) is executing as designed:

export function queryFunction() {
  var data = {};
  var url = 'http://localhost:5001/{firebaseProject}/{firebaseFunction}';

  var xhr = new XMLHttpRequest();
  xhr.open("POST", url, false);
  xhr.setRequestHeader('Content-Type', 'application/json');

  // xhr.onreadystatechange = function () {
  //   if (xhr.readyState == 4) {
  //       if (xhr.status == 200) {
  //         return xhr.responseText;
  //       }
  //   }
  // };

  xhr.onload = function() {
    var text = xhr.responseText;
    resolve(text);
  };

  xhr.onerror = function() {
    alert('Woops, error.');
  };

  xhr.send(JSON.stringify({
      value: data
  }));
}

With xhr, whether I use "onreadystatechange" or "onload" I am getting the expected result from my firebase function, but I can't seem to return that value to my calling function.

Whether I use 'resolve' or 'return', there is a value captured from "xhr.responseText", but the value returned is just 'undefined'.

What am I missing to be able to return this value to my original calling function?

Feels like I'm missing something obvious, any help is appreciated.

////////Update: clarification based on comments /////////////////

I probably should backtrack and show where I started, since these have whittled down to some relatively simple requests.

1. 'resolve' does compile and execute, only because it is imported from 'path'. On that note, I may be using 'resolve' completely incorrectly, but only because I was trying to make this work as a set of 'Promise' calls.

2. When I was trying to run this as 'Promise', I still wound up with an undefined result, but (I assume) only because the promise would return prior to being fulfilled.

That version of this looked like this:

  const getNextValue = async() => {
    await queryFunction().then(res =>{
      console.log(res);
    })

    console.log('done');
  }

and the query function was set as:

export function queryFunction() {
  var data = {};
  const options = {
      hostname: 'localhost',
      port: 5001,
      path: `/{firebaseProject}/{firebaseFunction}`,
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Content-Length': data.length,
      }
    }
    
    const req = http.request(options, res => {
      console.log(`statusCode: ${res.statusCode}`)
    
      let body = {};
      res.on('data', d => {
          body += d;
      });
      res.on('end', function () {
          resolve(body);
      });
    })
    
    req.on('error', error => {
      console.log(error)
      rejects(error);
    })
    
    req.write(JSON.stringify(data));
    req.end();
}

I couldn't seem to get this to work as I would expect a promise to, so I tried the alternative code above. At least with the first blocks of code, I can confirm that the full 'queryFunction()' is at least fully executing and reaching my return. With the second block, 'getNextValue' just completes, and I never get the result from the Promise.

I'm a decent dev, I get the concept of promises (at least in theory), i've been reading about them for the past couple hours trying to figure this out, but I'm just not grasping something.

I'm still reviewing the link you gave "https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call", I'll update once I've have more information.