3 Fundamental Concepts to Fully Understand how the Fetch API Works

Generated with DALL-E 3

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:

• Synchronous vs asynchronous code
• Callback functions
• Promises

Synchronous vs Asynchronous Code

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

Asynchronous code, on the other hand, allows the program to be non-blocking. JavaScript historically used callback functions to handle these operations, allowing the main thread to continue running while waiting for the asynchronous task to complete.

Here’s an example of asynchronous code using setTimeout, which is a Web API:

console.log('Start');

setTimeout(() => {
  console.log('Task completed after 2 seconds');
}, 2000);

console.log('End');
// Output:
// Start
// End
// Task completed after 2 seconds (appears after a 2-second delay)

Callback Functions

Callback functions are the cornerstone of JavaScript’s asynchronous behavior. A callback is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of action.

Here’s an example of using a callback function for an asynchronous operation: