Although the Fetch API does not have built-in interceptors and global error handling, it can be implemented through encapsulation functions; 2. In a custom apiClient, request interception can add authentication headers and default configurations before sending, and response interception can handle response data or errors uniformly; 3. By parsing the response status and content type, common HTTP errors are converted into standardized error objects and thrown; 4. Integrate logging, timeout control (using AbortController) and global error listening (such as unhandledrejection events); 5. Finally, a robust and maintainable HTTP client written in one time and reused multiple times does not need to rely on Axios.

When working with the Fetch API in JavaScript, you quickly realize it doesn't include built-in support for request/response interceptors or centralized error handling like Axios does. But with a little abstraction, you can add these features to make your HTTP calls more maintained and robust.

Here's how to enhance the Fetch API with interceptors and error handling in a clean, reusable way.

? Create a Custom Fetch Wrapper

Instead of calling fetch() directly, wrap it in a function that allows you to:

• Intercept requests (eg, add auth headers)
• Intercept responses (eg, log, transform, or handle errors)
• Handle common HTTP errors globally

 const apiClient = async (endpoint, options = {}) => {
  const defaultHeaders = {
    'Content-Type': 'application/json',
  };

  // ? Request Interceptor: Modify request before sending
  const config = {
    ...options,
    headers: {
      ...defaultHeaders,
      ...options.headers,
    },
  };

  // Add auth token if available
  const token = localStorage.getItem('authToken');
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }

  const baseUrl = 'https://api.example.com';
  const response = await fetch(`${baseUrl}${endpoint}`, config);

  // ? Response Interceptor: Handle responses and errors
  if (!response.ok) {
    let errorMessage = `HTTP Error: ${response.status}`;
    let errorData;

    const contentType = response.headers.get('content-type');
    if (contentType && contentType.includes('application/json')) {
      errorData = await response.json();
      errorMessage = errorData.message || errorMessage;
    } else {
      errorData = await response.text();
    }

    // Throw a standardized error object
    throw new Error(JSON.stringify({
      status: response.status,
      message: errorMessage,
      data: errorData,
    }));
  }

  // Parse JSON only if response has content
  const contentType = response.headers.get('content-type');
  if (contentType && contentType.includes('application/json')) {
    return await response.json();
  }

  return await response.text();
};

? Add Interceptor-Like Behavior

Since fetch doesn't support interceptors natively, you simulate them inside your wrapper:

• Request Interception : Modify options before fetch is called
• Response Interception : Process or transform responses before returning

You can even make it more modular:

 // Optional: Add logging interceptor
const logRequest = (url, options) => {
  console.log(`[API] Request: ${url}`, options);
};

const logResponse = (url, data) => {
  console.log(`[API] Response from ${url}:`, data);
};

// Update your apiClient to use them
const apiClient = async (endpoint, options = {}) => {
  const baseUrl = 'https://api.example.com';
  const url = `${baseUrl}${endpoint}`;

  logRequest(url, options); // ? Request interceptor

  // ... (rest of the logic)

  const data = await (response.json ? response.json() : response.text());

  logResponse(url, data); // ? Response interceptor

  return data;
};

? Centralized Error Handling

Instead of handling errors in every .catch() or try/catch , handle them consistently:

 // Usage with try/catch
try {
  const user = await apiClient('/user/123');
  console.log(user);
} catch (error) {
  const { status, message, data } = JSON.parse(error.message);

  if (status === 401) {
    // Redirect to login
    window.location.href = '/login';
  } else if (status === 404) {
    console.warn('Resource not found');
  } else {
    console.error('API Error:', message);
  }
}

Or use a global error handler for non-recoverable cases:

 window.addEventListener('unhandledrejection', (event) => {
  const error = JSON.parse(event.reason.message);
  if (error.status >= 500) {
    alert('We're having server issues. Please try again later.');
  }
});

? Optional: Add Request Timeout

fetch doesn't time out by default. You can add one using AbortController :

 const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 10000); // 10s

try {
  const response = await fetch(url, {
    ...config,
    signal: controller.signal,
  });
  clearTimeout(timeoutId);
  return response;
} catch (err) {
  if (err.name === 'AbortError') {
    throw new Error('Request timed out');
  }
  throw err;
}

? Summary

While the Fetch API is lightweight and modern, it lacks convenience features like interceptors and automatic error parsing. By wrapping it:

• ? You get request/response interference
• ? Global error handling and status checks
• ? Consistent headers , auth, and timeouts
• ? Better UX and debugging

You don't need Axios to have a powerful HTTP client — just a thin, smart wrapper.

Basically, write once, reuse everywhere.

The above is the detailed content of Using the Fetch API with Interceptors and Error Handling. For more information, please follow other related articles on the PHP Chinese website!