什么是JavaScript的异步错误处理策略，以及如何在Promise链和async/await中统一捕获异常？

.catch()

try...catch

.catch()

.catch()

.catch()

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok'); // 模拟一个错误
    }
    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
    // 进一步处理数据
  })
  .catch(error => {
    console.error('There was a problem fetching the data:', error);
    // 用户友好的错误提示
  });

fetch

response.ok

throw new Error()

.catch()

.catch()

.then()

.catch()

async

await

try...catch

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log('Data:', data);
    return data;
  } catch (error) {
    console.error('There was a problem fetching the data:', error);
    // 可以选择重新抛出错误，或者返回一个默认值
    throw error; // 或者 return null;
  }
}

fetchData().catch(error => {
  console.error('Global error handler:', error);
});

try...catch

await

fetch

response.json()

catch

catch

async

async

try...catch

async

.catch()

unhandledrejection

.catch()

window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled rejection:', event.reason);
  // 可以发送错误报告到服务器
  // 可以显示一个全局的错误提示
  event.preventDefault(); // 阻止默认行为，避免浏览器控制台显示错误
});

async

.catch()

async function main() {
  // ... 业务逻辑 ...
}

main().catch(error => {
  console.error('Global error handler:', error);
  // 全局错误处理逻辑
});

unhandledrejection

.catch()

.catch()

.catch()

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
    // 重新抛出错误，让上层调用者处理
    throw error;
  });