Introduction<\/p>\n\n\n\n
The Fetch API is a modern JavaScript feature used to make network requests to servers. It allows developers to retrieve and send data asynchronously without reloading the web page. Fetch is widely used for working with APIs and handling dynamic data in web applications.<\/p>\n\n\n\n
Core Purpose of Fetch API<\/p>\n\n\n\n
The Fetch API helps developers communicate with servers by sending requests and receiving responses. It is mainly used to load data from external sources such as databases or third party APIs and display it on a website in real time.<\/p>\n\n\n\n
How Fetch API Works<\/p>\n\n\n\n
Fetch uses promises to handle asynchronous operations. When a request is sent, it returns a promise that resolves once the response is received. This makes it easier to manage data and avoid blocking the user interface.<\/p>\n\n\n\n
Basic Syntax Example<\/p>\n\n\n\n
fetch(\"https:\/\/api.example.com\/data\")
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.log(\"Error:\", error);
});<\/code><\/pre>\n\n\n\nMaking Different Types of Requests<\/p>\n\n\n\n
GET Request
Used to retrieve data from a server<\/p>\n\n\n\n
fetch(\"https:\/\/api.example.com\/users\")
.then(res => res.json())
.then(data => console.log(data));<\/code><\/pre>\n\n\n\nPOST Request
Used to send data to a server<\/p>\n\n\n\n
fetch(\"https:\/\/api.example.com\/users\", {
method: \"POST\",
headers: {
\"Content-Type\": \"application\/json\"
},
body: JSON.stringify({
name: \"Ali\",
age: 22
})
})
.then(res => res.json())
.then(data => console.log(data));<\/code><\/pre>\n\n\n\nPUT Request
Used to update existing data<\/p>\n\n\n\n
fetch(\"https:\/\/api.example.com\/users\/1\", {
method: \"PUT\",
body: JSON.stringify({ name: \"Ahmed\" }),
headers: {
\"Content-Type\": \"application\/json\"
}
});<\/code><\/pre>\n\n\n\nDELETE Request
Used to remove data<\/p>\n\n\n\n
fetch(\"https:\/\/api.example.com\/users\/1\", {
method: \"DELETE\"
});<\/code><\/pre>\n\n\n\nHandling Errors<\/p>\n\n\n\n
Error handling is important when working with APIs. Fetch only rejects a promise on network failure, so developers must manually check response status.<\/p>\n\n\n\n
fetch(\"https:\/\/api.example.com\/data\")
.then(response => {
if (!response.ok) {
throw new Error(\"Request failed\");
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.log(error));<\/code><\/pre>\n\n\n\nAdvantages of Fetch API<\/p>\n\n\n\n
Simple and clean syntax
Built into modern browsers
Uses promises for better readability
Supports asynchronous programming
Flexible for different request types<\/p>\n\n\n\n
Conclusion<\/p>\n\n\n\n
The Fetch API is an essential tool in modern web development. It allows developers to interact with servers efficiently and build dynamic applications that update data in real time. Learning Fetch API improves your ability to work with APIs and create responsive web experiences.<\/p>\n\n\n