HTTP post

JavaScript, Browser · Oct 19, 2020

Makes a POST request to the passed URL.

  • Use the XMLHttpRequest web API to make a POST request to the given url.
  • Set the value of an HTTP request header with setRequestHeader method.
  • Handle the onload event, by calling the given callback the responseText.
  • Handle the onerror event, by running the provided err function.
  • Omit the fourth argument, err, to log errors to the console's error stream by default.
const httpPost = (url, data, callback, err = console.error) => {
  const request = new XMLHttpRequest();
  request.open('POST', url, true);
  request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
  request.onload = () => callback(request.responseText);
  request.onerror = () => err(request);
  request.send(data);
};
const newPost = {
  userId: 1,
  id: 1337,
  title: 'Foo',
  body: 'bar bar bar'
};
const data = JSON.stringify(newPost);
httpPost(
  'https://jsonplaceholder.typicode.com/posts',
  data,
  console.log
); /*
Logs: {
  "userId": 1,
  "id": 1337,
  "title": "Foo",
  "body": "bar bar bar"
}
*/
httpPost(
  'https://jsonplaceholder.typicode.com/posts',
  null, // does not send a body
  console.log
); /*
Logs: {
  "id": 101
}
*/

More like this

  • HTTP put

    JavaScript, Browser

    Makes a PUT request to the passed URL.

  • HTTP get

    JavaScript, Browser

    Makes a GET request to the passed URL.

  • HTTP delete

    JavaScript, Browser

    Makes a DELETE request to the passed URL.