服务端组件请求超时处理机制

在React Server Component实践中，服务端组件请求超时处理是确保应用稳定性的关键环节。本文将分享完整的超时处理机制实现方案。

超时配置与基础实现

首先，我们需要为服务端组件设置合理的超时时间：

// server-component.jsx
'use client'

export default async function DataComponent() {
  try {
    const response = await fetch('https://api.example.com/data', {
      headers: { 'Authorization': 'Bearer token' },
      signal: AbortSignal.timeout(5000) // 5秒超时
    });
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    return <div>{JSON.stringify(data)}</div>;
  } catch (error) {
    if (error.name === 'AbortError') {
      console.error('请求超时');
      return <div className="error">请求超时，请稍后重试</div>;
    }
    throw error;
  }
}

性能测试数据

在实际部署中，我们对不同超时时间进行了测试：

完整解决方案

// utils/apiClient.js
export const apiClient = {
  async get(url, options = {}) {
    const timeout = options.timeout || 5000;
    
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeout);
    
    try {
      const response = await fetch(url, {
        ...options,
        signal: controller.signal
      });
      clearTimeout(timeoutId);
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      
      return await response.json();
    } catch (error) {
      clearTimeout(timeoutId);
      if (error.name === 'AbortError') {
        throw new Error('请求超时');
      }
      throw error;
    }
  }
};

通过合理的超时配置，我们可以在保证用户体验的同时，有效防止因网络延迟导致的长时间等待问题。