The Fetch API is the modern standard for making network requests in the browser, and pairing it with async and await provides the cleanest, most readable way to handle asynchronous operations.
Understanding async and await
-
async: This keyword is placed before a function declaration (async function getData() { ... }) to indicate that the function will always return a Promise. -
await: This keyword can only be used inside anasyncfunction. It pauses the execution of theasyncfunction until the Promise it precedes is resolved (or rejected), effectively making asynchronous code look and behave like synchronous code.
Step-by-Step GET Request Example
Here is a template for fetching JSON data using async/await and the fetch API.
1. Define the async Function
Start by defining your function with the async keyword. It’s best practice to wrap your asynchronous code in a try...catch block to handle potential errors.
async function fetchData(url) {
try {
// ... code to fetch and process data
} catch (error) {
// ... code to handle errors
}
}
2. Fetch the Resource
Use await before the fetch() call. The fetch() function returns a Promise that resolves to a Response object.
const response = await fetch(url);
3. Check for HTTP Errors
The fetch API’s promise only rejects on network errors (like a dropped connection). It does not reject on HTTP error status codes like 404 or 500.
You must manually check the response’s ok property, which is true for a 200-299 status range
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
4. Extract the JSON Data
The Response object has a .json() method which returns a Promise that resolves to the parsed JSON data. Use await again to pause execution until the data is fully parsed.
const data = await response.json();
return data;
Complete GET Example
async function fetchPost(id) {
const url = `https://jsonplaceholder.typicode.com/posts/${id}`; // Example API URL
try {
let response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
let data = await response.json();
console.log("Fetched Data:", data);
return data;
} catch (error) {
console.error("Error fetching data:", error);
}
}
fetchPost(1);
🛠️ Handling Other Request Methods (POST/PUT/DELETE)
To use other HTTP methods like POST, you need to pass a second argument to fetch()—an options object. This object specifies the method, headers, and a body for the request.
POST Example
To send data (e.g., a new post), you must include:
-
method: 'POST' -
headers: Crucially,Content-Type: 'application/json'tells the server to expect JSON data. -
body: The data you are sending, converted to a JSON string usingJSON.stringify().
async function createPost(postData) {
const url = 'https://jsonplaceholder.typicode.com/posts';
try {
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(postData),
});
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const newPost = await response.json();
console.log("New Post Created:", newPost);
return newPost;
} catch (error) {
console.error("Error creating post:", error);
}
}
createPost({ title: 'My New Post', body: 'This is the content.', userId: 1 });
Useful links below:
Let me & my team build you a money making website/blog for your business https://bit.ly/tnrwebsite_service
Get Bluehost hosting for as little as $1.99/month (save 75%)…https://bit.ly/3C1fZd2
Best email marketing automation solution on the market! http://www.aweber.com/?373860
Build high converting sales funnels with a few simple clicks of your mouse! https://bit.ly/484YV29
Join my Patreon for one-on-one coaching and help with your coding…https://www.patreon.com/c/TyronneRatcliff
Buy me a coffee 
https://buymeacoffee.com/tyronneratcliff
