I am using a custom XMLHttpRequest and I was able to create an asynchronous call using it. But, there's a check immediately below the async call something like this:

this.data = null;
this.data = getURLAsync() // asynchronous call happens here and expecting a result.
if(this.data) {
  // perform some operation.
}

but this fails because it doesn't have the call resolved yet when the if condition is checked. So I have to take promise route and modified the code like below:

this.data = null;
this.data = executeURLPromise() // asynchronous call happens here and expecting a result.
if(this.data) {
  // perform some operation.
}

function executeURLPromise() {
  getURLAsync()
  .then(function (response) {
    this.data = response.data;
  })
}

created a fiddle here with a full use case: https://jsfiddle.net/tz4u06bL/1/

But now the problem is, we aren't using XMLHttpRequest but a different custom XMLHTTPRequest, that internally calls different uses cases and checks a few things. Due to which it goes only till ready State 1 and not till 4. So the promise is returned and the callback in the resolve method never gets executed. So I am trying to see if there's a workaround for this. I thought of writing a promise for the readyState and returning it, but not sure whether that's the right approach for this use case.