I am attempting to make an api get request using JS's built in XMLHttpRequest system. I am not sure why this function fails to work.
function updateStats(username){
const request = new XMLHttpRequest;
var url = "https://pitpanda.rocks/api/players/" + username;
request.open("GET", url);
request.send();
request.onload = (e) => {
return request.response;
}
}
My code is running on CodePen right now https://codepen.io/casperqf/pen/NWXGeqa
I recommend using fetch. Allows you to set the method and some other values.
Can do with fetch and not with XHR:
You can use the API with the request and response objects.
You can perform no-cors requests, getting a response from a server that doesn't implement CORS. You can't access the response body directly from JavaScript.
async function postData(url = '', data = {}) {
// Default options are marked with *
const response = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify(data) // body data type must match "Content-Type" header
});
return response.json(); // parses JSON response into native JavaScript objects
}
function updateStats(username, stats){
postData('https://pitpanda.rocks/api/players/' + username, { stats: stats })
.then(data => {
console.log(data); // JSON data parsed by `data.json()` call
});
}
updateStats('otik', 123);