Looking for a reusable async XMLRequest-Function-CodePudding

I'm creating a mostly clientside webapp using a game-API to display stats and inventory. This app needs to do a few get-requests after another and I'm trying to think of a simple function that can handle several different requests and always just gives the response back, while waiting for the previous request to finish.

My current function doesnt wait for the request to finish, so $temp is still undefined.

function BClick(){
        rqURL = 'https://endpoint';
        temp = getRequest(rqURL);
        console.log(temp);
}

function getRequest(URL) {
    akey = '000';
    var xr = new XMLHttpRequest();
    xr.open("GET", URL);
    xr.setRequestHeader("X-API-Key",akey);

    xr.onreadystatechange = () => {
        if (xr.readyState === 4) {
            xh = JSON.parse(xr.responseText);
            return xh;
        }
    };
    xr.send();
}

How can i make all this async and wait for the response to finish? I've tried looking into 'async function(){}' but this needs me to put the get-request in the 1st function. which would eliminate the reusability because i need to handle the responses differently.

Currently I'm thinking of a function that executes when a specific variable gets data, so it would just watch out for each of the response variables. There is surely a 'nicer' way, which i dont know.

CodePudding user response：

You can use simple callbacks or promises.

With promises

function getRequest(URL, akey) {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open('GET', URL);
    request.setRequestHeader('X-Api-Key', akey);
    request.onload = () => {
      if (request.status === 200) {
        resolve(request.response);
      } else {
        reject(Error(request.statusText));
      }
    };
    request.onerror = () => {
      reject(Error('Network Error'));
    };
    request.send();
  });
}

// Use with 'then' chain

getRequest('url', '000').then(function(responseData) {
  // parse data here if necessary
  console.log(responseData);
}).catch(function(error) {
  // handle error
  console.log(error);
});

However, browser fetch API already got this functionality so you can use that instead.

With callbacks

function getRequest(URL, akey, successCallback, failCallback) {
  const request = new XMLHttpRequest();
  request.open('GET', URL);
  request.setRequestHeader('X-Api-Key', akey);
  request.onload = () => {
    if (request.status === 200) {
      successCallback(request.response);
    } else {
      failCallback(Error(request.statusText));
    }
  };
  request.onerror = () => {
    failCallback(Error('Network Error'));
  };
  request.send();
}

// usage
getRequest(
  'url',
  '000',
  function (responseData) {
    // use data
    console.log(responseData);
  },
  function (error) {
    // handle error
    console.log(error);
  },
);

These are specific for your case but you can pass more parameters and improve them according to needs.