Asynchronous programming in JavaScript is a key component of modern web development. From fetching data over networks to handling complex user interactions, asynchronous code ensures that our applications remain responsive and efficient. With the rise of modern JavaScript frameworks and libraries like React, Vue, and Node.js, understanding advanced asynchronous patterns is no longer optional—it’s essential.

In this blog, we’ll dive deep into advanced asynchronous JavaScript, exploring concepts such as promises, async/await, and error handling, all while working with real-world examples. To make things more tangible, we’ll leverage the JSONPlaceholder API, a free and easy-to-use fake REST API that’s perfect for testing and prototyping

---

1. Understanding the Basics of Asynchronous JavaScript

Before diving into the advanced concepts, let’s quickly review the foundations of asynchronous programming in JavaScript. JavaScript is single-threaded, which means it can only execute one operation at a time. Asynchronous programming enables non-blocking code, meaning the program can initiate a task (such as fetching data) and continue executing other tasks without waiting for the asynchronous task to complete.

Common tasks that are asynchronous include:

• Network requests (e.g., fetching data from an API)

• Timer functions (setTimeout, setInterval)

• Event-driven callbacks (e.g., event listeners)

To deal with asynchronous code, JavaScript provides several tools, the most common being:

• Callbacks: Functions passed as arguments to other functions and executed when the asynchronous operation completes.

• Promises: An object representing a future value that may be available after an asynchronous operation completes.

• Async/Await: A more modern syntax built on top of promises for writing asynchronous code that looks synchronous.

Let’s start with promises.

---

2. Using Promises for Asynchronous Control

What is a Promise?

A promise is an object representing the eventual completion (or failure) of an asynchronous operation. Think of it as a placeholder for a value that hasn’t been computed yet. A promise can be in one of the following states:

• Pending: The promise’s outcome has not yet been determined.

• Fulfilled: The promise has been resolved successfully, and a value is available.

• Rejected: The promise was rejected, and there’s a reason for the failure.

Fetching Data from JSONPlaceholder API with Promises

Let’s start by fetching some data from the JSONPlaceholder API using promises. We’ll fetch a list of posts.

// URL to fetch data from JSONPlaceholder
const url = 'https://jsonplaceholder.typicode.com/posts';

// Fetching data using Promises
function fetchPosts() {
  fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => {
      console.log('Fetched Posts:', data);
    })
    .catch(error => {
      console.error('There was a problem with the fetch operation:', error);
    });
}

fetchPosts();

Here’s what’s happening:

• fetch(url) initiates a request to the JSONPlaceholder API.

• The first .then() handles the response, converting it into JSON format.

• The second .then() logs the fetched data.

• The .catch() block catches any errors that may occur during the process.

Chaining Promises

Chaining promises allows us to perform sequential asynchronous operations. For instance, let’s fetch a specific post, then retrieve the comments associated with it.

function fetchPostAndComments(postId) {
  const postUrl = `https://jsonplaceholder.typicode.com/posts/${postId}`;
  const commentsUrl = `https://jsonplaceholder.typicode.com/posts/${postId}/comments`;

  fetch(postUrl)
    .then(response => response.json())
    .then(post => {
      console.log('Post:', post);
      return fetch(commentsUrl);
    })
    .then(response => response.json())
    .then(comments => {
      console.log('Comments:', comments);
    })
    .catch(error => {
      console.error('Error fetching post or comments:', error);
    });
}

fetchPostAndComments(1);

This example fetches a post, and once the post is retrieved, it fetches its comments. The key takeaway here is how promises allow us to chain asynchronous operations while maintaining readability.

Handling Errors with Promises

Error handling is crucial in asynchronous programming. Promises provide the .catch() method, which allows us to catch and handle errors. Let’s modify the previous example to handle errors more effectively.

function fetchPostWithErrorHandling(postId) {
  const postUrl = `https://jsonplaceholder.typicode.com/posts/${postId}`;

  fetch(postUrl)
    .then(response => {
      if (!response.ok) {
        throw new Error(`Failed to fetch post with ID ${postId}`);
      }
      return response.json();
    })
    .then(post => {
      console.log('Post:', post);
    })
    .catch(error => {
      console.error('Error:', error.message);
    });
}

fetchPostWithErrorHandling(99999); // Invalid post ID to simulate an error

In this case, the fetch operation throws an error if the response is not OK, which is then caught by the .catch() block.

---

3. Async/Await: The Modern Approach

Promises are powerful but can sometimes lead to complex chains of .then() calls, making the code harder to read. The async/await syntax offers a cleaner way to work with promises, making asynchronous code look synchronous.

Converting Promises into Async/Await

Let’s convert the promise-based example of fetching posts into the async/await style.

async function fetchPostsAsync() {
  const url = 'https://jsonplaceholder.typicode.com/posts';

  try {
    const response = await fetch(url);
    const posts = await response.json();
    console.log('Posts:', posts);
  } catch (error) {
    console.error('Error fetching posts:', error.message);
  }
}

fetchPostsAsync();

Notice how much cleaner and more readable the code becomes. The await keyword pauses the function’s execution until the promise is resolved, while try/catch is used for error handling.

Parallel Asynchronous Operations

One of the most powerful features of async/await is the ability to run asynchronous operations in parallel. Let’s say we want to fetch multiple resources at the same time:

async function fetchMultipleResources() {
  try {
    const [postsResponse, commentsResponse] = await Promise.all([
      fetch('https://jsonplaceholder.typicode.com/posts'),
      fetch('https://jsonplaceholder.typicode.com/comments')
    ]);

    const posts = await postsResponse.json();
    const comments = await commentsResponse.json();

    console.log('Posts:', posts);
    console.log('Comments:', comments);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchMultipleResources();

With Promise.all(), we can run both fetch requests in parallel, improving performance when multiple asynchronous operations need to be executed simultaneously.

---

4. Advanced Concepts: Concurrency Control

When working with multiple asynchronous tasks, sometimes you may want to control the concurrency—i.e., how many tasks are running at the same time.

Using Promise.all() for Concurrent Tasks

The Promise.all() method allows us to execute multiple promises concurrently and wait until all of them have either resolved or rejected.

async function fetchMultiplePosts(postIds) {
  const promises = postIds.map(id => fetch(`https://jsonplaceholder.typicode.com/posts/${id}`));

  try {
    const responses = await Promise.all(promises);
    const posts = await Promise.all(responses.map(response => response.json()));
    console.log('Fetched Posts:', posts);
  } catch (error) {
    console.error('Error fetching posts:', error);
  }
}

fetchMultiplePosts([1, 2, 3]);

Here, Promise.all() is used to fetch multiple posts in parallel, and it waits until all promises are resolved. This is a great way to handle concurrent operations.

Handling Failures in Concurrent Tasks

If one of the promises in Promise.all() fails, the entire promise fails. Let’s simulate this:

async function fetchMultiplePostsWithFailure(postIds) {
  const promises = postIds.map(id => fetch(`https://jsonplaceholder.typicode.com/posts/${id}`));

  try {
    const responses = await Promise.all(promises);
    const posts = await Promise.all(responses.map(response => response.json()));
    console.log('Fetched Posts:', posts);
  } catch (error) {
    console.error('Error fetching posts:', error);
  }
}

fetchMultiplePostsWithFailure([1, 99999, 3]);

 // 99999 will fail

When one promise fails, the entire Promise.all() will reject, which is why error handling is crucial.

---

5. Practical Example: CRUD Operations with JSONPlaceholder API

Let’s put everything together in a practical example where we perform CRUD (Create, Read, Update, Delete) operations on the JSONPlaceholder API.

GET (Retrieve Data)

async function getPost(postId) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
    const post = await response.json();
    console.log('Post:', post);
  } catch (error) {
    console.error('Error fetching post:', error);
  }
}

getPost(1);

POST (Create Data)

async function createPost(newPost) {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(newPost)
    });

    const post = await response.json();
    console.log('Created Post:', post);
  } catch (error) {
    console.error('Error creating post:', error);
  }
}

createPost({
  title: 'New Post',
  body: 'This is a new post created via API',
  userId: 1
});

PUT (Update Data)

async function updatePost(postId, updatedPost) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(updatedPost)
    });

    const post = await response.json();
    console.log('Updated Post:', post);
  } catch (error) {
    console.error('Error updating post:', error);
  }
}

updatePost(1, {
  title: 'Updated Post Title',
  body: 'Updated post content',
  userId: 1
});

DELETE (Delete Data)

async function deletePost(postId) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`, {
      method: 'DELETE'
    });

    if (response.ok) {
      console.log(`Post ${postId} deleted successfully`);
    }
  } catch (error) {
    console.error('Error deleting post:', error);
  }
}

deletePost(1);

---

6. Conclusion

Asynchronous JavaScript is an essential skill in modern web development. Whether you're fetching data from an API or handling user interactions, understanding how to manage asynchronous operations effectively can greatly enhance the performance and responsiveness of your applications.

In this blog, we explored advanced asynchronous JavaScript concepts, focusing on promises and async/await while using the JSONPlaceholder API for practical examples. You now have the tools to write cleaner, more readable, and more efficient asynchronous code.

As you continue your journey in JavaScript, always remember to handle errors gracefully, leverage concurrency where appropriate, and write code that is easy to reason about. With these advanced techniques, you’ll be well-equipped to tackle any asynchronous challenge that comes your way. Happy coding!