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.
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.