如何在前端应用程序中处理失败的API协定

async function fetchData(url) {
  try {
    const response = await fetch(url);
    
    if (!response.ok) {
      // 处理非2xx状态码的响应
      const errorData = await response.json();
      throw new Error(`API Error: ${response.status} - ${errorData.message}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    // 处理网络错误或其他异常情况
    console.error('Fetch Error:', error);
    // 可以在这里进行用户通知或重试逻辑
    alert('数据加载失败，请稍后再试。');
  }
}

// 使用示例
fetchData('https://api.example.com/data')
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error('Error in fetchData:', error);
  });