Making API calls in JavaScript is a fundamental skill that every web developer needs to master. Over the years, I’ve learned that it’s not just about getting data from a server; it’s about creating reliable, efficient, and maintainable code. In this article, I’ll share seven effective patterns for handling API calls that have significantly improved my JavaScript applications.

Promise Chaining for Sequential API Calls

Promise chaining allows us to perform multiple API calls in sequence, with each subsequent call dependent on the results of the previous one. This pattern is particularly useful when you need to fetch related data.

function fetchUserAndPosts(userId) {
  return fetch(`/api/users/${userId}`)
    .then(response => {
      if (!response.ok) throw new Error('Failed to fetch user');
      return response.json();
    })
    .then(user => {
      return fetch(`/api/users/${user.id}/posts`)
        .then(response => {
          if (!response.ok) throw new Error('Failed to fetch posts');
          return response.json();
        })
        .then(posts => {
          return { user, posts };
        });
    })
    .catch(error => {
      console.error('Error fetching user data:', error);
      throw error;
    });
}

The beauty of this approach is that it maintains a clear flow of operations while handling errors appropriately. Each .then() returns a new promise, allowing for a clean chain of asynchronous operations.

Async/Await for Cleaner Code

While promise chaining works well, the async/await syntax makes asynchronous code even more readable by allowing it to be written in a way that resembles synchronous code.

async function fetchUserAndPosts(userId) {
  try {
    const userResponse = await fetch(`/api/users/${userId}`);
    if (!userResponse.ok) throw new Error('Failed to fetch user');
    
    const user = await userResponse.json();
    
    const postsResponse = await fetch(`/api/users/${user.id}/posts`);
    if (!postsResponse.ok) throw new Error('Failed to fetch posts');
    
    const posts = await postsResponse.json();
    
    return { user, posts };
  } catch (error) {
    console.error('Error fetching user data:', error);
    throw error;
  }
}

I’ve found that this approach significantly improves code readability, especially for complex sequences of API calls. The try/catch block provides clean error handling, and the await keyword makes it clear where we’re waiting for asynchronous operations to complete.

Request Batching for Performance

When your application needs to make multiple related API calls, batching them can dramatically improve performance by reducing network overhead.

async function batchFetchUserData(userIds) {
  // Instead of fetching each user separately
  // Send a single request with all user IDs
  const response = await fetch('/api/users/batch', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ userIds })
  });
  
  if (!response.ok) throw new Error('Batch fetch failed');
  
  return response.json();
}

// Alternative approach using Promise.all for parallel requests
async function parallelFetchUsers(userIds) {
  const promises = userIds.map(id => 
    fetch(`/api/users/${id}`).then(response => {
      if (!response.ok) throw new Error(`Failed to fetch user ${id}`);
      return response.json();
    })
  );
  
  return Promise.all(promises);
}

Both approaches have their place. The first method reduces the number of HTTP requests by sending a single batch request, while the second executes multiple requests in parallel using Promise.all. I’ve found the first approach works better when the backend supports batch operations, while the second is more universal but can lead to rate limiting issues with large batches.

Creating an API Abstraction Layer

One pattern that has saved me countless hours is creating a dedicated service layer to encapsulate all API interactions. This centralizes your API logic and makes it much easier to maintain.

class ApiService {
  constructor(baseURL) {
    this.baseURL = baseURL;
    this.defaultHeaders = {
      'Content-Type': 'application/json'
    };
  }

  async get(endpoint, customHeaders = {}) {
    return this.request(endpoint, 'GET', null, customHeaders);
  }

  async post(endpoint, data, customHeaders = {}) {
    return this.request(endpoint, 'POST', data, customHeaders);
  }

  async put(endpoint, data, customHeaders = {}) {
    return this.request(endpoint, 'PUT', data, customHeaders);
  }

  async delete(endpoint, customHeaders = {}) {
    return this.request(endpoint, 'DELETE', null, customHeaders);
  }

  async request(endpoint, method, data = null, customHeaders = {}) {
    const url = `${this.baseURL}${endpoint}`;
    const headers = { ...this.defaultHeaders, ...customHeaders };
    
    const options = {
      method,
      headers,
      credentials: 'include'  // Includes cookies in the request
    };
    
    if (data) {
      options.body = JSON.stringify(data);
    }
    
    const response = await fetch(url, options);
    
    // Handle different types of responses
    if (response.status === 204) {
      return null; // No Content
    }
    
    const responseData = await response.json();
    
    if (!response.ok) {
      throw new Error(responseData.message || 'API request failed');
    }
    
    return responseData;
  }
}

// Usage example
const api = new ApiService('https://api.example.com');

// User service built on top of the API service
class UserService {
  constructor(apiService) {
    this.api = apiService;
  }
  
  async getUser(id) {
    return this.api.get(`/users/${id}`);
  }
  
  async updateUser(id, userData) {
    return this.api.put(`/users/${id}`, userData);
  }
}

This approach gives me several benefits:

• Consistent error handling across all API calls
• Easy addition of authentication headers or other shared logic
• Simple mocking for tests
• A clean interface for the rest of the application

Implementing Retry Logic

Network issues happen, and a robust application needs to handle temporary failures gracefully. Implementing retry logic for API calls can significantly improve the user experience.

async function fetchWithRetry(url, options = {}, maxRetries = 3, delay = 1000) {
  let lastError;
  
  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {
      const response = await fetch(url, options);
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        
        // Don't retry for client errors (4xx) except for 429 (Too Many Requests)
        if (response.status >= 400 && response.status < 500 && response.status !== 429) {
          throw new Error(`Client error: ${response.status} ${errorData.message || response.statusText}`);
        }
        
        throw new Error(`Server error: ${response.status} ${errorData.message || response.statusText}`);
      }
      
      return response;
    } catch (error) {
      console.warn(`Attempt ${attempt + 1} failed: ${error.message}`);
      lastError = error;
      
      // If not the last attempt, wait before retrying
      if (attempt < maxRetries - 1) {
        // Exponential backoff
        const backoffDelay = delay * Math.pow(2, attempt);
        await new Promise(resolve => setTimeout(resolve, backoffDelay));
      }
    }
  }
  
  throw lastError;
}

// Usage
async function getUserData(userId) {
  try {
    const response = await fetchWithRetry(`/api/users/${userId}`);
    return response.json();
  } catch (error) {
    console.error('Failed to fetch user data after multiple attempts:', error);
    throw error;
  }
}

I’ve found that implementing exponential backoff (increasing the delay between retries) is particularly effective for handling temporary network issues or rate limiting. This pattern has been crucial for applications in environments with unstable connections.

Circuit Breaker Pattern

The circuit breaker pattern takes retry logic a step further by temporarily disabling API calls after detecting repeated failures. This prevents a failing API from bringing down your entire application and gives the external service time to recover.

class CircuitBreaker {
  constructor(request, options = {}) {
    this.request = request;
    this.state = 'CLOSED';  // CLOSED, OPEN, HALF-OPEN
    this.failureThreshold = options.failureThreshold || 5;
    this.resetTimeout = options.resetTimeout || 30000; // 30 seconds
    this.failureCount = 0;
    this.lastFailureTime = null;
    this.successThreshold = options.successThreshold || 2;
    this.successCount = 0;
  }
  
  async exec(...args) {
    if (this.state === 'OPEN') {
      if (Date.now() - this.lastFailureTime >= this.resetTimeout) {
        this.state = 'HALF-OPEN';
      } else {
        throw new Error('Circuit breaker is OPEN');
      }
    }
    
    try {
      const response = await this.request(...args);
      
      this.onSuccess();
      return response;
    } catch (error) {
      this.onFailure();
      throw error;
    }
  }
  
  onSuccess() {
    if (this.state === 'HALF-OPEN') {
      this.successCount++;
      
      if (this.successCount >= this.successThreshold) {
        this.successCount = 0;
        this.failureCount = 0;
        this.state = 'CLOSED';
      }
    }
  }
  
  onFailure() {
    this.failureCount++;
    this.lastFailureTime = Date.now();
    
    if (this.state === 'CLOSED' && this.failureCount >= this.failureThreshold) {
      this.state = 'OPEN';
    } else if (this.state === 'HALF-OPEN') {
      this.state = 'OPEN';
      this.successCount = 0;
    }
  }
  
  getState() {
    return this.state;
  }
}

// Usage
const getUserCircuitBreaker = new CircuitBreaker(
  (userId) => fetch(`/api/users/${userId}`).then(res => res.json()),
  { failureThreshold: 3, resetTimeout: 10000 }
);

async function getUser(userId) {
  try {
    return await getUserCircuitBreaker.exec(userId);
  } catch (error) {
    if (error.message === 'Circuit breaker is OPEN') {
      console.log('Service is currently unavailable. Please try again later.');
      // Return cached data or fallback UI
      return getLocalUserCache(userId);
    }
    throw error;
  }
}

This pattern has been essential for building resilient applications that depend on multiple external APIs. It’s particularly valuable for microservice architectures where services might experience temporary outages.

Request Cancellation

Modern JavaScript provides elegant ways to cancel pending requests when they’re no longer needed, which is crucial for preventing race conditions and unnecessary network traffic.

function fetchWithCancellation(url, options = {}) {
  const controller = new AbortController();
  const { signal } = controller;
  
  const promise = fetch(url, { ...options, signal })
    .then(response => {
      if (!response.ok) throw new Error(`Request failed with status ${response.status}`);
      return response.json();
    });
  
  // Attach the abort method to the promise
  promise.cancel = () => controller.abort();
  
  return promise;
}

// Usage in a search component
class SearchComponent {
  constructor() {
    this.currentRequest = null;
  }
  
  async search(query) {
    // Cancel any in-flight request
    if (this.currentRequest) {
      this.currentRequest.cancel();
    }
    
    // Start a new request
    this.currentRequest = fetchWithCancellation(`/api/search?q=${encodeURIComponent(query)}`);
    
    try {
      const results = await this.currentRequest;
      this.displayResults(results);
    } catch (error) {
      if (error.name === 'AbortError') {
        // Request was cancelled, do nothing
        console.log('Search request cancelled');
      } else {
        console.error('Search failed:', error);
        this.displayError(error);
      }
    } finally {
      if (this.currentRequest) {
        this.currentRequest = null;
      }
    }
  }
  
  displayResults(results) {
    // Update UI with results
  }
  
  displayError(error) {
    // Show error message in UI
  }
}

I’ve found this pattern particularly valuable for search interfaces or any situation where rapid user input can trigger multiple API calls. Cancelling outdated requests saves bandwidth and prevents confusing race conditions where slower requests might override the results of newer ones.

Bringing It All Together

To demonstrate how these patterns can work together, here’s a more comprehensive example that integrates several of the approaches:

class ApiClient {
  constructor(baseURL) {
    this.baseURL = baseURL;
    this.circuitBreakers = {};
  }
  
  getCircuitBreaker(endpoint) {
    if (!this.circuitBreakers[endpoint]) {
      this.circuitBreakers[endpoint] = new CircuitBreaker(
        this._fetch.bind(this),
        { failureThreshold: 3, resetTimeout: 10000 }
      );
    }
    return this.circuitBreakers[endpoint];
  }
  
  async _fetch(endpoint, options = {}) {
    const controller = new AbortController();
    const { signal } = controller;
    
    const timeoutId = setTimeout(() => controller.abort(), options.timeout || 10000);
    
    try {
      const response = await fetch(`${this.baseURL}${endpoint}`, {
        ...options,
        signal,
        headers: {
          'Content-Type': 'application/json',
          ...options.headers
        }
      });
      
      clearTimeout(timeoutId);
      
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(errorData.message || `API error: ${response.status}`);
      }
      
      return response.json();
    } catch (error) {
      clearTimeout(timeoutId);
      throw error;
    }
  }
  
  async fetchWithRetry(endpoint, options = {}, maxRetries = 3) {
    const breaker = this.getCircuitBreaker(endpoint);
    
    return breaker.exec(endpoint, options);
  }
  
  async get(endpoint, options = {}) {
    return this.fetchWithRetry(endpoint, { ...options, method: 'GET' });
  }
  
  async post(endpoint, data, options = {}) {
    return this.fetchWithRetry(endpoint, {
      ...options,
      method: 'POST',
      body: JSON.stringify(data)
    });
  }
  
  // Create a cancellable request
  createCancellableRequest(endpoint, options = {}) {
    const controller = new AbortController();
    const { signal } = controller;
    
    const promise = this.fetchWithRetry(endpoint, { ...options, signal });
    promise.cancel = () => controller.abort();
    
    return promise;
  }
  
  // Batch multiple requests
  async batchRequests(requests) {
    return Promise.all(
      requests.map(req => this.get(req.endpoint, req.options))
    );
  }
}

// Usage examples
const api = new ApiClient('https://api.example.com');

// Simple GET request
async function getUserProfile(userId) {
  try {
    return await api.get(`/users/${userId}`);
  } catch (error) {
    console.error('Failed to fetch user profile:', error);
    throw error;
  }
}

// Cancellable search request
function createSearchComponent() {
  let currentRequest = null;
  
  return {
    search: async (query) => {
      // Cancel previous request if it exists
      if (currentRequest) {
        currentRequest.cancel();
      }
      
      // Create new cancellable request
      currentRequest = api.createCancellableRequest(`/search?q=${encodeURIComponent(query)}`);
      
      try {
        return await currentRequest;
      } catch (error) {
        if (error.name !== 'AbortError') {
          console.error('Search failed:', error);
        }
        throw error;
      }
    }
  };
}

// Batch requests example
async function loadDashboardData(userId) {
  try {
    const [profile, posts, notifications] = await api.batchRequests([
      { endpoint: `/users/${userId}` },
      { endpoint: `/users/${userId}/posts` },
      { endpoint: `/users/${userId}/notifications` }
    ]);
    
    return { profile, posts, notifications };
  } catch (error) {
    console.error('Failed to load dashboard data:', error);
    throw error;
  }
}

This integrated approach provides a robust foundation for handling API calls in complex applications.

Final Thoughts

Throughout my career as a developer, I’ve found that effective API call patterns aren’t just about making requests to a server; they’re about creating reliable, maintainable code that can handle real-world conditions. The approaches outlined in this article have helped me build applications that degrade gracefully when services are unavailable and provide a smooth user experience even in challenging network environments.

By implementing these patterns, you’ll not only write better code but also create applications that are more resilient to the unpredictable nature of network requests. The best part is that these patterns aren’t mutually exclusive – they can be combined to create an API layer that meets the specific needs of your application.

Remember that the ultimate goal is to create an abstraction that makes the rest of your application simpler and more reliable. With these patterns in your toolkit, you’ll be well-equipped to handle the complexities of modern web API interactions.