Skip to main content

JavaScript Async Programming

Introduction​

Asynchronous programming is a cornerstone of modern JavaScript development, especially when building applications with frameworks like Next.js. Unlike synchronous code that executes line by line, asynchronous code allows operations to run in the background while the rest of your code continues to execute. This is crucial for operations like:

  • Fetching data from APIs
  • Reading files
  • Database operations
  • Handling user interactions

In this guide, we'll explore the evolution of asynchronous patterns in JavaScript, from callbacks to promises to the modern async/await syntax, with practical examples relevant to Next.js development.

Why Asynchronous Programming Matters​

When building web applications, especially with Next.js, many operations don't return results immediately:

  • API requests take time to receive responses
  • Database queries need processing time
  • File operations aren't instantaneous

Without asynchronous programming, your application would "freeze" while waiting for these operations to complete, resulting in poor user experience.

The Evolution of Async Patterns in JavaScript​

1. Callbacks​

The original approach to async programming in JavaScript involved callbacks - functions passed as arguments to be executed later.

javascript
// Example of callback pattern
function fetchUserData(userId, callback) {
  console.log("Fetching user data...");
  
  // Simulate API request with setTimeout
  setTimeout(() => {
    const userData = {
      id: userId,
      name: "John Doe",
      email: "[email protected]"
    };
    
    // Execute the callback with the result
    callback(userData);
  }, 1000);
}

// Using the callback function
fetchUserData(123, (user) => {
  console.log("User data received:");
  console.log(user);
});

console.log("This runs before user data is received!");

// Output:
// Fetching user data...
// This runs before user data is received!
// (after 1 second)
// User data received:
// { id: 123, name: 'John Doe', email: '[email protected]' }

While callbacks work, they can lead to "callback hell" when multiple async operations need to be chained:

javascript
fetchUserData(123, (user) => {
  fetchUserPosts(user.id, (posts) => {
    fetchPostComments(posts[0].id, (comments) => {
      // Deeply nested code becomes hard to read and maintain
      // This is often called "callback hell" or the "pyramid of doom"
    });
  });
});

2. Promises​

Promises provide a more structured way to handle async operations, allowing cleaner chaining of operations and better error handling.

javascript
// Example of promise pattern
function fetchUserData(userId) {
  console.log("Fetching user data...");
  
  return new Promise((resolve, reject) => {
    // Simulate API request
    setTimeout(() => {
      if (userId > 0) {
        const userData = {
          id: userId,
          name: "John Doe",
          email: "[email protected]"
        };
        resolve(userData); // Success case
      } else {
        reject("Invalid user ID"); // Error case
      }
    }, 1000);
  });
}

// Using the promise
fetchUserData(123)
  .then(user => {
    console.log("User data received:", user);
    return user;
  })
  .then(user => {
    console.log("Can chain operations:", user.name);
  })
  .catch(error => {
    console.error("An error occurred:", error);
  })
  .finally(() => {
    console.log("Operation completed regardless of success/failure");
  });

console.log("This runs before the promise resolves!");

// Output:
// Fetching user data...
// This runs before the promise resolves!
// (after 1 second)
// User data received: { id: 123, name: 'John Doe', email: '[email protected]' }
// Can chain operations: John Doe
// Operation completed regardless of success/failure

Key Promise Methods​

  • Promise.all(): Wait for all promises in an array to resolve
  • Promise.race(): Resolves or rejects as soon as one promise in an array resolves or rejects
  • Promise.allSettled(): Wait for all promises to settle (resolve or reject)
  • Promise.any(): Resolves when any promise in an array resolves

Example of Promise.all():

javascript
const fetchUser = () => new Promise(resolve => setTimeout(() => resolve({ id: 1, name: 'User' }), 1000));
const fetchPosts = () => new Promise(resolve => setTimeout(() => resolve(['Post 1', 'Post 2']), 1500));

Promise.all([fetchUser(), fetchPosts()])
  .then(([user, posts]) => {
    console.log('User:', user);
    console.log('Posts:', posts);
  })
  .catch(error => console.error('Error:', error));

// Output after 1.5 seconds:
// User: { id: 1, name: 'User' }
// Posts: ['Post 1', 'Post 2']

3. Async/Await​

Async/await is syntactic sugar built on top of promises, making asynchronous code look and behave more like synchronous code. This is the preferred method in modern JavaScript and Next.js applications.

javascript
// Example of async/await pattern
async function getUserData(userId) {
  console.log("Fetching user data...");
  
  try {
    // Simulate API request using a promise
    const user = await new Promise((resolve, reject) => {
      setTimeout(() => {
        if (userId > 0) {
          resolve({
            id: userId,
            name: "John Doe",
            email: "[email protected]"
          });
        } else {
          reject("Invalid user ID");
        }
      }, 1000);
    });
    
    console.log("User data received:", user);
    return user;
  } catch (error) {
    console.error("Error fetching user data:", error);
    throw error; // Re-throwing the error for further handling
  }
}

// Using async/await
async function displayUserInfo() {
  try {
    console.log("Starting to fetch user...");
    const user = await getUserData(123);
    console.log(`${user.name} can be found at ${user.email}`);
  } catch (error) {
    console.error("Failed to display user info:", error);
  } finally {
    console.log("Display operation completed");
  }
}

displayUserInfo();
console.log("This runs before async operations complete!");

// Output:
// Starting to fetch user...
// Fetching user data...
// This runs before async operations complete!
// (after 1 second)
// User data received: { id: 123, name: 'John Doe', email: '[email protected]' }
// John Doe can be found at [email protected]
// Display operation completed

Practical Async Patterns in Next.js​

Next.js heavily leverages asynchronous JavaScript for data fetching and rendering. Here are some practical examples:

1. Data Fetching in Next.js Pages​

javascript
// Example of data fetching in a Next.js page component
import { useState, useEffect } from 'react';

function ProductPage({ productId }) {
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function loadProduct() {
      try {
        setLoading(true);
        // Fetch data from an API
        const response = await fetch(`/api/products/${productId}`);
        
        if (!response.ok) {
          throw new Error(`Error: ${response.status}`);
        }
        
        const data = await response.json();
        setProduct(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    
    loadProduct();
  }, [productId]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!product) return <div>No product found</div>;

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
    </div>
  );
}

export default ProductPage;

2. Using getServerSideProps for Server-Side Rendering​

javascript
// Example of using async/await in getServerSideProps for SSR
export async function getServerSideProps(context) {
  try {
    // Get the product ID from URL parameters
    const { id } = context.params;
    
    // Fetch product data from an API
    const response = await fetch(`https://api.example.com/products/${id}`);
    
    if (!response.ok) {
      // Handle non-success responses
      return {
        notFound: true // This will show the 404 page
      };
    }
    
    const product = await response.json();
    
    // Pass the data to the page via props
    return {
      props: { product }
    };
  } catch (error) {
    console.error("Failed to fetch product:", error);
    
    // Return an error page
    return {
      props: { error: "Failed to load product data" }
    };
  }
}

function ProductDetail({ product, error }) {
  // Handle error state
  if (error) {
    return <div>Error: {error}</div>;
  }

  // Render product details
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

export default ProductDetail;

3. API Routes with Async Handlers​

javascript
// Example of an API route in Next.js (pages/api/users/[id].js)
export default async function handler(req, res) {
  const { id } = req.query;
  
  try {
    // Get the request method
    switch (req.method) {
      case 'GET':
        // Fetch user from database (simulated)
        const user = await fetchUserFromDatabase(id);
        
        if (!user) {
          return res.status(404).json({ message: 'User not found' });
        }
        
        return res.status(200).json(user);
        
      case 'PUT':
        // Update user in database
        const updatedData = req.body;
        const updatedUser = await updateUserInDatabase(id, updatedData);
        return res.status(200).json(updatedUser);
        
      case 'DELETE':
        // Delete user
        await deleteUserFromDatabase(id);
        return res.status(204).end();
        
      default:
        res.setHeader('Allow', ['GET', 'PUT', 'DELETE']);
        return res.status(405).end(`Method ${req.method} Not Allowed`);
    }
  } catch (error) {
    console.error(`Error handling ${req.method} request:`, error);
    return res.status(500).json({ message: 'Internal server error' });
  }
}

// Simulated database functions
async function fetchUserFromDatabase(id) {
  // In a real app, this would query a database
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id, name: 'Jane Doe', email: '[email protected]' });
    }, 100);
  });
}

async function updateUserInDatabase(id, data) {
  // Simulated database update
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id, ...data, updatedAt: new Date().toISOString() });
    }, 100);
  });
}

async function deleteUserFromDatabase(id) {
  // Simulated database deletion
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(true);
    }, 100);
  });
}

Best Practices for Async Programming​

  1. Always handle errors with try/catch blocks when using async/await
  2. Avoid mixing promise chains and async/await in the same function
  3. Use Promise.all() when executing multiple independent async operations
  4. Set appropriate timeouts for network requests to prevent hanging operations
  5. Add loading states to provide feedback during async operations
  6. Implement retry logic for operations that might fail temporarily
javascript
// Example of retry logic with exponential backoff
async function fetchWithRetry(url, options = {}, retries = 3, backoff = 300) {
  try {
    const response = await fetch(url, options);
    if (response.ok) return response.json();
    throw new Error(`Request failed with status ${response.status}`);
  } catch (error) {
    if (retries <= 0) throw error;
    
    // Wait with exponential backoff
    await new Promise(resolve => setTimeout(resolve, backoff));
    
    // Retry with increased backoff
    return fetchWithRetry(url, options, retries - 1, backoff * 2);
  }
}

// Usage
async function fetchProductData(id) {
  try {
    // Will retry up to 3 times with exponential backoff
    return await fetchWithRetry(`/api/products/${id}`);
  } catch (error) {
    console.error("Failed to fetch product after multiple attempts:", error);
    throw error;
  }
}

Common Async Pitfalls and Solutions​

Pitfall 1: Forgetting to await promises​

javascript
// Incorrect: not awaiting the promise
function saveUser(user) {
  const result = saveToDatabase(user); // Returns a promise but not awaited
  return { success: true, data: result }; // Result is a pending promise, not the actual data
}

// Correct: properly awaiting the promise
async function saveUser(user) {
  const result = await saveToDatabase(user);
  return { success: true, data: result };
}

Pitfall 2: Losing error context in async/await​

javascript
// Incorrect: error details get lost
async function processOrder(order) {
  try {
    await validateOrder(order);
    await chargeCustomer(order.customerId, order.amount);
    await updateInventory(order.items);
    await sendConfirmationEmail(order.customerEmail);
  } catch (error) {
    // Which operation failed? We don't know!
    console.error("Order processing failed:", error);
  }
}

// Better: preserve operation context
async function processOrder(order) {
  try {
    await validateOrder(order);
  } catch (error) {
    throw new Error(`Order validation failed: ${error.message}`);
  }
  
  try {
    await chargeCustomer(order.customerId, order.amount);
  } catch (error) {
    throw new Error(`Payment processing failed: ${error.message}`);
  }
  
  // Continue with other operations...
}

Pitfall 3: Async operations in loops​

javascript
// Inefficient: sequential processing of items
async function processItems(items) {
  for (const item of items) {
    await processItem(item); // Each item waits for the previous one
  }
}

// Better for independent items: parallel processing
async function processItems(items) {
  const promises = items.map(item => processItem(item));
  return Promise.all(promises); // All items processed in parallel
}

// For controlled concurrency:
async function processItemsWithConcurrencyLimit(items, concurrency = 3) {
  const results = [];
  const chunks = [];
  
  // Split items into chunks based on concurrency
  for (let i = 0; i < items.length; i += concurrency) {
    chunks.push(items.slice(i, i + concurrency));
  }
  
  // Process each chunk in parallel, but chunks sequentially
  for (const chunk of chunks) {
    const chunkResults = await Promise.all(
      chunk.map(item => processItem(item))
    );
    results.push(...chunkResults);
  }
  
  return results;
}

Summary​

Asynchronous programming is essential for building responsive, efficient JavaScript applications, especially when working with Next.js. Through this guide, we've explored:

  1. The evolution of async patterns from callbacks to promises to async/await
  2. Practical implementations in Next.js components, API routes, and data fetching
  3. Best practices for handling errors, optimizing performance, and avoiding common pitfalls

By mastering asynchronous JavaScript, you'll be able to build Next.js applications that efficiently handle external data, provide better user experiences, and scale effectively.

Further Learning Resources​

  1. JavaScript.info: Promises, async/await
  2. MDN Web Docs: Using Promises
  3. Next.js Documentation: Data Fetching

Exercises​

  1. Basic Promise Chain: Create a function that simulates an API call to get a user, then gets their posts, then gets comments for the first post, all using promise chaining.

  2. Async/Await Refactor: Take the promise chain from exercise 1 and refactor it to use async/await syntax.

  3. Error Handling: Create an async function that might fail at different stages and implement proper error handling with informative error messages.

  4. Parallel Processing: Write a function that fetches data for multiple products in parallel using Promise.all() and handles both success and failure scenarios.

  5. Next.js Implementation: Build a simple Next.js page that fetches data from an external API using getServerSideProps and displays loading, error, and success states appropriately.


If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)