my-react-blog

让异常可控

错误处理不是把所有代码都包进 try...catch，而是让程序在出错时仍然能提示用户、保留现场，并且方便开发者排查。

适用场景

接口请求失败
表单提交失败
权限失效或登录过期
上传、支付、保存等关键操作异常

技术点总览

技术点	主要作用
try...catch 捕获同步异常	当一段代码可能直接抛出错误时，可以用 try...catch 捕获。catch 里通常要做两件事：记录错误，以及给业务一个可继续执行的结果。
async/await 中处理异步错误	await 后面的 Promise 如果变成 rejected，也会被 try...catch 捕获。请求接口时通常会在这里处理网络失败、状态码异常和数据格式异常。
业务层做降级展示	底层函数返回 null 后，页面层可以决定展示空状态、重试按钮，还是使用缓存数据。这样错误不会直接扩散成页面白屏。

分批介绍

try...catch 捕获同步异常

当一段代码可能直接抛出错误时，可以用 try...catch 捕获。catch 里通常要做两件事：记录错误，以及给业务一个可继续执行的结果。

1function parseUser(jsonText) {
2  try {
3    return JSON.parse(jsonText)
4  } catch (error) {
5    console.error('parse user failed:', error)
6    return null
7  }
8}

async/await 中处理异步错误

await 后面的 Promise 如果变成 rejected，也会被 try...catch 捕获。请求接口时通常会在这里处理网络失败、状态码异常和数据格式异常。

1async function requestUser(id) {
2  try {
3    const res = await fetch('/api/user/' + id)
4 
5    if (!res.ok) {
6      throw new Error('request failed')
7    }
8 
9    return await res.json()
10  } catch (error) {
11    console.error(error)
12    return null
13  }
14}

业务层做降级展示

底层函数返回 null 后，页面层可以决定展示空状态、重试按钮，还是使用缓存数据。这样错误不会直接扩散成页面白屏。

1const user = await requestUser(1)
2 
3if (!user) {
4  showToast('用户信息加载失败')
5  renderEmptyState()
6}

使用建议

不要在 catch 中空处理。
不要把底层错误文本直接展示给用户。
关键链路建议同时做提示、兜底和日志上报。

小结

让异常可控的重点不是记住某个 API，而是理解它解决的问题、适合的场景以及和其它技术点之间的关系。把每个小知识点拆开看，再组合到真实业务里，代码会更有规律，也更容易维护。