How to Send Query Params in GET and POST in JavaScript
To send query parameters in a POST request in JavaScript, we need to pass a body property to the configuration object of the Fetch API that matches the data type of the "Content-Type" header.
(async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: 'This will be the title',
body: 'Setting the body property',
userId: 1,
}),
headers: {
'Content-type': 'application/json; charset=UTF-8'
},
})
const data = await response.json()
console.log(data)
})()The body will always need to match the "Content-type" header.
Notice that you will also need to set the method property to "POST". Make sure you wrap your object into JSON.stringify in order to pass a proper JSON payload.
We can wrap the entire call into an async IIFE in order to use await. We can also create a helper function for later use that expects a URL and an object for the query parameters:
const post = async (url, params) => {
const response = await fetch(url, {
method: 'POST',
body: JSON.stringify(params),
headers: {
'Content-type': 'application/json; charset=UTF-8',
}
})
const data = await response.json()
return data
}
// Then use it like so with async/await:
(async () => {
const data = await post('https://jsonplaceholder.typicode.com/posts', {
title: 'This will be the title',
body: 'Setting the body property',
userId: 1
})
console.log(data)
})()
// Or using then:
post('https://jsonplaceholder.typicode.com/posts', {
title: 'This will be the title',
body: 'Setting the body property',
userId: 1,
}).then(data => console.log(data))
Then we can call it either using async/await, or using a then callback.
How to Send Query Parameters in GET
To send query parameters in a GET request in JavaScript, we can pass a list of search query parameters using the URLSearchParams API.
(async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/comments?' + new URLSearchParams({
postId: 1
}))
const data = await response.json()
console.log(data)
})()This will convert the object into a string with key-value pairs. Eg, the above example would become "postId=1". Notice that here, you don't need to pass a method property for the Fetch API, as it uses GET by default. We can also use a helper function for this one too to make the call reusable:
const get = async (url, params) => {
const response = await fetch(url + '?' + new URLSearchParams(params))
const data = await response.json()
return data
}
// Call it with async:
(async () => {
const data = await get('https://jsonplaceholder.typicode.com/comments', {
postId: 1,
})
console.log(data)
})()
// Calling it with then:
get('https://jsonplaceholder.typicode.com/comments', {
postId: 1,
}).then(data => console.log(data))
Want to get webtips to your mailbox? 📬
Tired of looking for tutorials?
You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.
Check out our interactive course to master JavaScript in less time.
Learn More
