Autocomplete API Calls and Caching

Autocomplete API Calls and Caching

Fetching suggestions from an API and caching results improves performance. Here is how.

Fetching from an API

async function fetchSuggestions(query) {
  const response = await fetch(`/api/suggestions?q=${encodeURIComponent(query)}`);
  const data = await response.json();
  return data;
}

Caching Results

const cache = new Map();

async function fetchWithCache(query) {
  if (cache.has(query)) {
    return cache.get(query);
  }
  const data = await fetchSuggestions(query);
  cache.set(query, data);
  return data;
}

Cache with Expiration

const CACHE_TTL = 60000; // 1 minute

function fetchWithExpiringCache(query) {
  if (cache.has(query)) {
    const { data, timestamp } = cache.get(query);
    if (Date.now() - timestamp < CACHE_TTL) return data;
  }
  const data = await fetchSuggestions(query);
  cache.set(query, { data, timestamp: Date.now() });
  return data;
}

Cancel Previous Requests

let currentController;

async function fetchWithCancellation(query) {
  if (currentController) currentController.abort();
  currentController = new AbortController();
  try {
    const res = await fetch(`/api/suggestions?q=${query}`, { signal: currentController.signal });
    return await res.json();
  } catch (err) {
    if (err.name !== "AbortError") throw err;
  }
}

The Takeaway

API calls and caching: fetch from API (with encodeURIComponent), cache results (Map with query as key), cache with expiration (TTL), and cancel previous requests (AbortController). Caching avoids duplicate API calls for the same query. Cancellation prevents race conditions when the user types quickly.