Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'xxx')
    at async fetchData (app.js:45:12)
    at async handleClick (app.js:120:5)

Uncaught (in promise) Error: Request failed with status code 404

// 錯(cuò)誤寫法 —— 會(huì)觸發(fā) Uncaught (in promise)
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));

// 方式1：鏈?zhǔn)?.catch
fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => {
    console.error('請(qǐng)求失敗:', err);
    // 顯示錯(cuò)誤提示給用戶
    alert('網(wǎng)絡(luò)錯(cuò)誤，請(qǐng)稍后重試');
  });

// 方式2：async/await + try…catch（更推薦）
async function loadData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error('獲取數(shù)據(jù)失敗:', err);
    // UI 錯(cuò)誤處理
    showErrorMessage(err.message);
  }
}

loadData();

// 錯(cuò)誤寫法
button.addEventListener('click', () => {
  fetchUserInfo().then(updateUI);   // 沒(méi)有 catch
});

// 錯(cuò)誤寫法（async 寫法更危險(xiǎn)）
button.addEventListener('click', async () => {
  const user = await fetchUserInfo();   // 這里出錯(cuò) → Uncaught (in promise)
  updateUI(user);
});

button.addEventListener('click', async () => {
  try {
    const user = await fetchUserInfo();
    updateUI(user);
  } catch (err) {
    console.error('點(diǎn)擊加載用戶失敗:', err);
    showToast('加載失敗');
  }
});

// 危險(xiǎn)寫法
function checkLogin() {
  return new Promise((resolve, reject) => {
    if (!token) {
      reject(new Error('未登錄'));
    }
    resolve(getUser());
  });
}

// 使用時(shí)忘記 catch
checkLogin().then(user => console.log(user));   // → Uncaught (in promise)

checkLogin().catch(err => {
  console.warn('登錄檢查失敗:', err);
  redirectToLogin();
});

// 捕獲所有未處理的 rejection
window.addEventListener('unhandledrejection', event => {
  const reason = event.reason;
  console.error('捕獲到未處理的 Promise 拒絕:', reason);
  
  // 可以在這里上報(bào)到監(jiān)控系統(tǒng)
  reportErrorToSentry(reason);
  
  // 阻止默認(rèn)的控制臺(tái)打?。蛇x）
  // event.preventDefault();
});

// 推薦：創(chuàng)建一個(gè)安全的請(qǐng)求工具函數(shù)
async function safeRequest(promise) {
  try {
    return await promise;
  } catch (err) {
    // 統(tǒng)一錯(cuò)誤處理邏輯
    handleApiError(err);
    throw err; // 如果需要讓調(diào)用方也知道錯(cuò)誤，可以繼續(xù)拋出
  }
}

// 使用
const data = await safeRequest(fetch('/api/list').then(r => r.json()));