fetch('https://api.example.com/nonexistent-endpoint')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP 錯(cuò)誤! 狀態(tài): ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('數(shù)據(jù):', data);
  })
  .catch(error => {
    console.error('發(fā)生錯(cuò)誤:', error);
  });

fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else if (response.status === 404) {
      throw new Error('資源未找到 (404)');
    } else {
      throw new Error(`服務(wù)器錯(cuò)誤! 狀態(tài): ${response.status}`);
    }
  })
  .then(data => {
    console.log('數(shù)據(jù):', data);
  })
  .catch(error => {
    console.error('發(fā)生錯(cuò)誤:', error.message);
    // 根據(jù)錯(cuò)誤類(lèi)型執(zhí)行相應(yīng)的操作，如顯示錯(cuò)誤消息給用戶(hù)
  });

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (response.ok) {
      const data = await response.json();
      console.log('數(shù)據(jù):', data);
      return data;
    } else if (response.status === 404) {
      console.error('資源未找到 (404)');
      // 這里可以處理404錯(cuò)誤，如顯示特定的消息或重定向
    } else {
      throw new Error(`服務(wù)器錯(cuò)誤! 狀態(tài): ${response.status}`);
    }
  } catch (error) {
    console.error('發(fā)生錯(cuò)誤:', error.message);
    // 處理網(wǎng)絡(luò)錯(cuò)誤或其他意外錯(cuò)誤
  }
}

fetchData('https://api.example.com/nonexistent-endpoint');

async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json(); // 假設(shè)API在錯(cuò)誤時(shí)也返回JSON
    if (response.ok) {
      console.log('數(shù)據(jù):', data);
      return data;
    } else {
      // 假設(shè)錯(cuò)誤信息在data.message中
      throw new Error(`錯(cuò)誤: ${data.message}`);
    }
  } catch (error) {
    console.error('發(fā)生錯(cuò)誤:', error.message);
    // 根據(jù)錯(cuò)誤類(lèi)型執(zhí)行相應(yīng)的操作
  }
}

fetchData('https://api.example.com/nonexistent-endpoint');

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP 錯(cuò)誤! 狀態(tài): ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    // 處理數(shù)據(jù)
  })
  .catch(error => {
    // 處理錯(cuò)誤
  });

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (response.ok) {
      const data = await response.json();
      return data;
    } else if (response.status === 404) {
      displayErrorMessage('您請(qǐng)求的頁(yè)面未找到。');
    } else {
      throw new Error(`服務(wù)器錯(cuò)誤! 狀態(tài): ${response.status}`);
    }
  } catch (error) {
    displayErrorMessage('發(fā)生了一個(gè)錯(cuò)誤，請(qǐng)稍后再試。');
    console.error('發(fā)生錯(cuò)誤:', error);
  }
}

function displayErrorMessage(message) {
  const errorDiv = document.getElementById('error');
  if (errorDiv) {
    errorDiv.textContent = message;
    errorDiv.style.display = 'block';
  }
}

async function fetchWithRetry(url, options = {}, retries = 3, backoff = 300) {
  try {
    const response = await fetch(url, options);
    if (response.ok) {
      return await response.json();
    } else if (response.status === 404) {
      throw new Error('資源未找到 (404)');
    } else {
      throw new Error(`服務(wù)器錯(cuò)誤! 狀態(tài): ${response.status}`);
    }
  } catch (error) {
    if (retries > 0 && error.message !== '資源未找到 (404)') {
      console.warn(`請(qǐng)求失敗，正在重試... 剩余次數(shù): ${retries}`);
      await new Promise(resolve => setTimeout(resolve, backoff));
      return fetchWithRetry(url, options, retries - 1, backoff * 2); // 指數(shù)退避
    } else {
      throw error;
    }
  }
}

fetchWithRetry('https://api.example.com/data')
  .then(data => {
    console.log('數(shù)據(jù):', data);
  })
  .catch(error => {
    console.error('請(qǐng)求最終失敗:', error.message);
  });

interface User {
  name: string;
  age: number;
}

async function fetchUser(url: string): Promise<User> {
  const response = await fetch(url);
  if (!response.ok) {
    if (response.status === 404) {
      throw new Error('用戶(hù)未找到 (404)');
    }
    throw new Error(`服務(wù)器錯(cuò)誤! 狀態(tài): ${response.status}`);
  }
  const data: User = await response.json();
  return data;
}

fetchUser('https://api.example.com/users/1')
  .then(user => {
    console.log('用戶(hù):', user.name);
  })
  .catch(error => {
    console.error('發(fā)生錯(cuò)誤:', error.message);
  });

import * as Sentry from '@sentry/browser';

Sentry.init({ dsn: 'YOUR_SENTRY_DSN' });

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP 錯(cuò)誤! 狀態(tài): ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    Sentry.captureException(error);
    console.error('發(fā)生錯(cuò)誤:', error.message);
    throw error;
  }
}

fetchData('https://api.example.com/data')
  .then(data => {
    // 處理數(shù)據(jù)
  })
  .catch(error => {
    // 處理錯(cuò)誤
  });

async function getUser(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (response.ok) {
      const user = await response.json();
      console.log('用戶(hù)數(shù)據(jù):', user);
      return user;
    } else if (response.status === 404) {
      console.error('用戶(hù)未找到 (404)');
      // 可以顯示用戶(hù)友好的錯(cuò)誤消息或進(jìn)行其他處理
    } else {
      throw new Error(`服務(wù)器錯(cuò)誤! 狀態(tài): ${response.status}`);
    }
  } catch (error) {
    console.error('網(wǎng)絡(luò)錯(cuò)誤或其他問(wèn)題:', error);
    // 可以顯示全局錯(cuò)誤消息或重試邏輯
  }
}

getUser(12345);