3 Fundamental Concepts to Fully Understand how the Fetch API Works

Understanding the Fetch API can be challenging, particularly for those new to JavaScript’s unique approach to handling asynchronous…Continue reading on Better Programming »

Member-only story

3 Fundamental Concepts to Fully Understand how the Fetch API Works

Jay Cruz

4 min readNov 7, 2023

Press enter or click to view image in full size

[Cyberpunk-inspired scene with a cyborg Pitbull dog playing fetch.]

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

*Original source*