Developped by App Masons
live javascript fetch with input in progress.
And how does an HTTP request work? These are topics that we, as front-end developers, use every day. However, when we look deeper, we often don’t fully understand the underlying engine — how it really works under the hood.
Let’s grab a coffee and look at the basic fetch operation in JavaScript. Then, we will analyze it further.
const dummyJSONUrl = 'https://dummyjson.com/products';
async function fetchAPI(url) {
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
});
return await response.json();
}
await fetchAPI(dummyJSONUrl);
async/await is not only a cleaner way of writing promises, but it also prevents blocking the stack. (I am planning an article that will explain the event loop and the call stack.) It helps you organize code better and avoid "callback hell."
A function declared with async always returns a promise. The await keyword pauses execution until the promise resolves and returns its result.
Additionally, fetch is a JavaScript method responsible for making server calls. It supports various HTTP methods, including GET, POST, PUT, DELETE, and PATCH. It allows specifying the request URL, headers, and body (if needed). Of course, you can add error handling to manage server responses and errors using try...catch.
You can still use a classic promise with .then() resolution. Sometimes, having a single callback function is convenient. However, in the past, when this was the only option, handling multiple requests and mapping responses often led to the so-called "callback hell."
setTimeout(() => {
console.log('I am lazy');
return setTimeout(() => {
console.log('I am still lazy');
return setTimeout(() => {
return 'Start work!';
}, 100);
}, 100);
}, 100);
When you type a URL into your browser and hit Enter, or when an application makes an API call, this is the process getting kickstarted. If the request is HTTPS, additional steps to secure the request are also initialized.
First, the client must prepare the request. The request is prepared with the query params, the body and header — with some additional information such as Authorization token.
First, the client must prepare the request. The request is prepared with the query params, the body and header — with some additional information such as Authorization token.
Now our local system will make a call to the domain name service, to obtain an IP address.
A process of identification of IP addresses of every party involved from your local machine, router, internet provider, server etc…
This topic is so complex, that I won't write even the basics of the process, if you want to know more I recommend to watch this video: https://www.youtube.com/watch?v=TTH_f2lKHRM
After the dns process there is still a firewall barrier on the server, that checks the incoming requests and handles it accordingly.
Then the request goes to various caching systems and load balancer etc.
I found really great article about the whole process, https://dev.to/ashevelyov/the-step-by-step-journey-of-a-network-request-1d10
Why is it important to understand the process? Imagine that you have a certain bug. Your request fails, and as a front-end developer you go directly to your BE developer and start a discussion. Isn't it better to understand the whole process, and therefore become a better developer with better debugging skills?
Understanding how fetch works and what happens under the hood is crucial for debugging network requests efficiently. By learning about async/await, HTTP request lifecycle, and networking fundamentals, you can become a more effective front-end developer.