將Fetch API與攔截器和錯誤處理

雖然Fetch API沒有內置攔截器和全局錯誤處理，但可以通過封裝函數實現；2. 在自定義apiClient中，請求攔截可在發送前添加認證頭和默認配置，響應攔截可統一處理響應數據或錯誤；3. 通過解析響應狀態和內容類型，將常見HTTP錯誤轉換為標準化的錯誤對象並拋出；4. 可集成日誌記錄、超時控制（使用AbortController）和全局錯誤監聽（如unhandledrejection事件）；5. 最終實現了一次編寫、多處復用的健壯、可維護的HTTP客戶端，無需依賴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 maintainable 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 interception
• ✅ 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.

以上是將Fetch API與攔截器和錯誤處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！