JavaScript中利用try...catch进行异常处理

封装了一个方法来查询银行 logo 的文件名，然后使用 require 引用。

<image
  class="iconImg"
  :src="require(`@/static/icons/setting/bankIcon/${this.getCodeWitName(name)}.png`)"
/>

但是在开发过程中遇到一个问题，当这个文件不存在时，就会报错没办法继续执行，会导致页面空白等一系列问题发生。

这时候可以利用 try...catch 语句来处理异常：

getImgData (code) {
  var data = null
  try {
    data = require(`@/static/icons/setting/bankIcon/${this.getIconWithCode(code)}`)
  } catch (error) {
    data = require(`@/static/icons/setting/bankIcon/default.png`)
  }
  return data
}

try...catch 语句

try...catch 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码。

try {
  //在此运行代码
} catch(err) {
  //在此处理错误
}

MDN 的定义：

The try...catch statement marks a block of statements to try and specifies a response should an exception be thrown.

try...catch 语句标记要执行的语句，并指定一个当有异常抛出时候的响应。

Error 的主要属性：

description：错误描述 (仅IE可用)

fileName：出错的文件名 (仅Mozilla可用)

lineNumber：出错的行数 (仅Mozilla可用)

message：错误信息 (在IE下同description)

name：错误类型. 

number：错误代码 (仅IE可用). 

stack：像Java中的Stack Trace一样的错误堆栈信息 (仅Mozilla可用). 

尝试 require 一张图片，如果抛出错误，则使用默认图片。

find () {
  let data = null
  try {
    data = require(`@/static/icons/setting/bankIcon/logo.png`)
  } catch (err) {
    console.log(err)
    data = require(`@/static/icons/setting/bankIcon/default.png`)
  }
  return data
}
# Error: Cannot find module '@/static/icons/setting/bankIcon/logo.png'

未经允许不得转载：前端资源网 - w3h5 » JavaScript中利用try...catch进行异常处理