#丰田品质B级纯电家轿9.38万#

前端代码在用户浏览器中运行。用户环境很复杂。不同浏览器有不同版本。

网络可能不稳定。用户操作可能意外。这些情况都会让代码出错。try catch 能防止小错误导致页面崩溃。

实际使用场景

网络请求处理

async function fetchData() {  try {    const response = await fetch('/api/data') const response = await fetch('/api/data')    const data = await response.json()    return data  } catch (error) {    console.log('请求失败')    return null  }}

解析数据

function parseData(jsonString) {  try {    return JSON.parse(jsonString)  } catch {    return {}  }}

使用第三方库

try {  thirdPartyLib.doSomething()} catch (error) {  fallbackSolution()}

如果你看过Vue 的源码，你就会发现try...catch 无处不在。

使用 try catch 的好处

防止页面崩溃

没有错误处理时：

undefinedFunction() // 页面直接崩溃

有错误处理时：

try {  undefinedFunction()} catch {  // 页面继续运行}

提升用户体验

出错时给用户提示：

try {  loadData()} catch {  showMessage('加载失败，请重试')}

收集错误信息

try {  // 业务代码} catch (error) {  reportError(error) // 上报错误}

当然也得分一些情况，比如最简单的一些场景就不需要使用了。

只在可能出错的地方使用：

// 这里不需要 try catchconst a = 1const b = 2console.log(a + b)// 这里需要 try catchtry {  localStorage.setItem('key', data)} catch {  // 处理存储错误}

处理不同类型错误

try {  // 可能出错的操作} catch (error) {  if (error instanceof TypeError) {    // 处理类型错误  } else {    // 处理其他错误  }}

try...catch 可以帮助你更优雅地处理潜在的错误，防止它们影响整个应用程序的正常运行。

在前端的JavaScript中，try...catch 块确实可以有一个额外的部分，称为finally，它会在无论是否发生异常都执行一次。

这个finally块是可选的，但如果存在，它将在try块中的代码执行后以及catch块（如果有的话）执行后运行。

try {  // 可能会引发异常的代码} catch (error) {  // 处理异常的代码} finally {  // 在无论是否发生异常都执行的代码}

好的错误处理让应用更稳定，提供用户粘性和极致的体验。