Attempting to send POST request to API with JavaScript function

Question

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

Answer 1

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);