Aug 7, 2020

Make a POST request with fetch

fetch is utility for making HTTP requests from the browser. It is available in all modern browsers and has a popular polyfill for older browsers.

To make a GET request, just pass the endpoint to the global fetch method:

fetch("https://mirror-api.seanmcp.repl.co/get");

It returns a promise that will resolve with the server response. From there, you can convert the response to JSON and read the value in your code:

(async function () {
  const response = await fetch("https://mirror-api.seanmcp.repl.co/get");
  const data = await response.json();
  console.log(data);
})();

But fetch also handles other request methods. After GET, the first you will reach for is POST. But it isn’t immediately apparent how to make a request with a different method.

How to POST with fetch

The global fetch function accepts a second options argument. There you can set the method, add a body, and set headers.

Here is an example POST request that sends a JSON body:

fetch("https://mirror-api.seanmcp.repl.co/post", {
  method: "POST",
  body: JSON.stringify({ message: "Hello API!" }),
  headers: {
    "Content-Type": "application/json",
  },
});

Once you have the request in order, you can handle the promises and get the server response.

For more information on the available including examples with other methods, checkout Using Fetch on MDN.

Happy fetching!

---