Make a POST Request with JavaScript fetch()

Copy Link LinkedIn Message Facebook Email X

You may not always want to GET information from APIs, often you need to send information so that it can be saved somewhere. In this lesson, you'll be looking at how to make POST requests.

Many APIs have specific ways they want you to send data, be sure to always have the documentation of the specific API you are using close at hand.

The API you'll use to experiment with POST requests is a mock API used for testing, httpbin.org.

Make a POST Request With Fetch

There is an optional second argument to fetch(), where you can define a whole bunch of extra things related to your request, such as the method, and the data you will send with your request. This is called the options parameter. For example, to make a GET request, you can do this:

const url = 'https://httpbin.org/get';
const options = {
	method: 'GET'
};
fetch(url, options);

The GET method is the default method for fetch() unless you specify otherwise.

If you are sending a POST request, you will have data that you want to send to the server. Most servers need this to be a string that is parsable to JSON. You can't pass a plain JavaScript object - you need to stringify it first:

fetch('https://httpbin.org/post', {
	method: 'POST',
	body: JSON.stringify({
		greeting: 'Hello World'
	})
})
	.then((resp) => resp.text())
	.then((text) => console.log(text));

Try this out, the response you get should be something like this:

{
  "args": {},
  "data": "{\"greeting\":\"Hello World\"}",
  "files": {},
  "form": {},
  "headers": {
    ...
  },
  "json": {
    "greeting": "Hello World"
  },
  "origin": "111.11.11.111",
  "url": "https://httpbin.org/post"
}

The endpoint just echoes back your initial request. Again, depending on the API your using, you may just get a blank 200 response to indicate that your request was successful. Another common response is getting a copy of the updated resource.

Check the documentation of your specific API to check if you need to define any special options, such as specific headers:

{
	"method": "GET",
	"headers": {
		"Content-type": "text/plain"
	}
}

The Content-type header is very common, and most servers ask this to be application/json. However, sometimes sending application/json is restricted, and a workaround can be setting the content type to text/plain, even though it's JSON. Not all servers follow "the rules"!

Learn by Doing

Copy the examples from this lesson and get them working in your labs. Make a few variations, too.

Summary: How to Make a POST Request

In this lesson, you:

• Recognized the importance of always referring to the API documentation when making requests, as each API might have unique requirements.
• Discovered that the fetch() function accepts an optional second argument for additional options, like specifying the HTTP method.
• Understood that the default method for fetch() is GET, but you can change it to POST when you're sending data to a server.
• Remembered that when sending data, the server generally expects it as a JSON string—so you need to use JSON.stringify() on the data.
• Realized the significance of setting the right Content-type header, which should be application/json for JSON data.