How do I POST a x-www-form-urlencoded request using Fetch?

javascript

fetch-api

async-await

error-handling

byAnton Shumikhin·Nov 23, 2024

A Fetch POST request bearing x-www-form-urlencoded data rests on setting up the headers and body appropriately. Here's how you do it using the convenient tool URLSearchParams:

fetch('https://example.com/endpoint', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({ 'param1': 'value1', 'param2': 'value2' }).toString()
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Houston, we have a problem:', error));

A quick .toString() ensures URLSearchParams transforms into an acceptable string format.

Encoding and formatting parameters

When working with an x-www-form-urlencoded request, remember the importance of encoding and the correct formatting of data.

Encoding parameter values

I'm not as quick as Thor's hammer, but I can ensure safe escapes for your special characters. Behold encodeURIComponent on individual values:

const params = {
  'param with space': encodeURIComponent('I am Groot & symbol')
};

Dealing with array parameters

Array parameters have a mind of their own. They need a special way of concatenation to behave. Here's a nice trick using join:

const arrayParams = {
  'colors': ['red', 'green', 'blue'].map(encodeURIComponent).join('&colors=')
};

Assembling parameters manually

In environments where URLSearchParams has gone on vacation (like React Native), assemble your encoded string manually, just like Iron-Man making his suit.

const params = {
  'key1': encodeURIComponent('value1'),
  'key2': encodeURIComponent('value2')
};
const encodedParams = Object.keys(params)
  .map(key => `${key}=${params[key]}`)
  .join('&');

Surprise: Advanced Usage

Async/await capture the flag

If you think Peter Parker swings smoothly through the city, you'll love async/await for its silky asynchronous code execution.

async function postData(url = '', data = {}) {
  const response = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams(data).toString()
  });
  return response.json();
}

What if something goes wrong? Error handling

Do you remember Doctor Strange's plan B? That's right, always have a backup plan for when things go upside down. Implement reliable error handling:

postData('https://example.com/endpoint', { 'param1': 'value1' })
  .then(data => console.log(data))
  .catch(error => console.error('It seems we went too far in the quantum realm:', error));

Debugging: Ant-Man style

To debug effectively, pull an Ant-Man and shrink down to inspect each element. Log your responses or tokens after a successful fetch operation:

fetch('https://example.com/endpoint', {
  // Your fetch request configuration
})
.then(response => response.json())
.then(data => {
  console.log('You have a message, starlord:', data);
  if (data.accessToken) {
    console.log('Access Token:', data.accessToken);
  }
})
.catch(error => console.error('Error:', error));