3 Fundamental Concepts to Fully Understand how the Fetch API Works | by Jay Cruz

Understanding the Fetch API can be challenging, particularly for those new to JavaScript’s unique approach to handling asynchronous operations. Among the many features of modern JavaScript, the Fetch API stands out for its ability to handle network requests elegantly. However, the syntax of chaining .then() methods can seem unusual at first glance. To fully grasp how the Fetch API works, it’s vital to understand three core concepts:

In programming, synchronous code is executed in sequence. Each statement waits for the previous one to finish before executing. JavaScript, being single-threaded, runs code in a linear fashion. However, certain operations, like network requests, file system tasks, or timers, could block this thread, making the user experience unresponsive.

Here’s a simple example of synchronous code:

function doTaskOne() {
console.log('Task 1 completed');
}
function doTaskTwo() {
console.log('Task 2 completed');
}
doTaskOne();
doTaskTwo();
// Output:
// Task 1 completed
// Task 2 completed