HTTP (Hypertext Transfer Protocol) is the foundation of communication on the World Wide Web. It defines a set of request methods, also known as HTTP methods, that indicate the desired action to be performed on a resource.
In this blog post, we will explore the most commonly used HTTP methods and their purposes.
GET
The GET method is used to retrieve data from a specified resource. It is a safe and idempotent method, meaning that multiple identical requests should have the same effect as a single request.
Example usage:
fetch('https://httpbin.org/get')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
POST
The POST method is used to submit an entity to the specified resource, often causing a change in state or side effects on the server. It is not idempotent, meaning that multiple identical requests may have different effects.
Example usage:
fetch('https://httpbin.org/post', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ key: 'value' }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
PUT
The PUT method is used to replace the current representation of a resource with the request payload. It is idempotent, meaning that multiple identical requests should have the same effect as a single request.
Example usage:
fetch('https://httpbin.org/put', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ key: 'value' }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
PATCH
The PATCH method is used to apply partial modifications to a resource. It is not idempotent, meaning that multiple identical requests may have different effects.
Example usage:
fetch('https://httpbin.org/patch', {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ key: 'value' }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
DELETE
The DELETE method is used to remove a specified resource. It is idempotent, meaning that multiple identical requests should have the same effect as a single request.
Example usage:
fetch('https://httpbin.org/delete', {
method: 'DELETE',
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
OPTIONS
The OPTIONS method is used to describe the communication options for the target resource. It is often used to request information about the communication options available on the server.
Example usage:
fetch('https://httpbin.org/get', {
method: 'OPTIONS'
})
.then(response => {
console.log('Allowed methods:', response.headers.get('Access-Control-Allow-Methods'));
return response.status
})
.then(text => console.log(text))
.catch(error => console.error('Error:', error));
PREFLIGHT
The PREFLIGHT method is used to check if the actual request can be made, given the communication options available on the server. It is often used in cross-origin requests to check if the server allows the actual request to be made.
Example usage:
fetch('https://httpbin.org/post', {
method: 'OPTIONS',
headers: {
'Access-Control-Request-Method': 'POST',
'Access-Control-Request-Headers': 'Content-Type, X-Custom-Header',
'Origin': 'https://httpbin.org'
}
})
.then(response => response.headers.forEach(console.log))
.catch(error => console.error('Error:', error));
UPGRADE
The UPGRADE method is used to switch the protocol being used on the current connection. It is often used in WebSocket connections to switch from HTTP to WebSocket protocol.
HEAD
The HEAD method is similar to the GET method, but it only retrieves the headers of the response without the body. It is often used to check the status of a resource without downloading the entire content.
Example usage:
fetch('https://httpbin.org/get', {
method: 'HEAD'
})
.then(response => {
// Log each header
response.headers.forEach((value, key) => {
console.log(key + ': ' + value);
});
return response.text();
})
.then(text => console.log(text))
.catch(error => console.error('Error:', error));
Conclusion
Understanding the different HTTP methods and their purposes is essential for building web applications that interact with APIs and web services. By using the appropriate HTTP method for each request, you can ensure that your application behaves as expected and follows best practices for web development.