前端开发中的try...catch

基本结构
try {
  throw new Error('Hello world');
  console.log('抛出错误后,这里就不会执行了')
} catch (err) {
  // 只有try抛出错误这里才会执行
  console.error(err.message); // Hello world
} finally {
  console.log('无论如何都会执行');
}

catch捕获的Error对象中包含以下属性:

  • name:是错误的名称,例如 “Error”, “SyntaxError”, “ReferenceError” 等。
  • message:有关错误详细信息的消息。
  • stack:是用于调试目的的错误的堆栈跟踪。

JavaScript 有以下内置错误,这些错误是从 Error 对象继承而来的

  1. EvalError:表示关于全局eval()函数的错误,这个异常不再由 JS 抛出,它的存在是为了向后兼容。
  2. RangeError:当引用一个不存在的变量时,将引发 ReferenceError
  3. SyntaxError:当你在 JS 代码中使用任何错误的语法时,都会引发SyntaxError
  4. TypeError:如果该值不是预期的类型,则抛出TypeError。比如1();
  5. URIError:如果以错误的方式使用全局 URI 方法,则会抛出URIError。比如decodeURI("%%%");
try不可独身
try {
  throw new Error('Hello World');
}
ⓧ Uncaught SyntaxError: Missing catch or finally after try

每个try块必须与至少一个catchfinally块,否则会抛出SyntaxError错误。

throw
throw <expression>

throw语句用于引发异常。

// throw基础类型
throw "error";
throw 11;
throw true;
throw {toString: function() { return "I'm an object!"; } };

// throw error对象
throw new Error('通用错误');
throw new SyntaxError('语法错误');
throw new ReferenceError('引用错误');

// throw 自定义错误对象
function ValidationError(message) {
  this.message = message;
  this.name = 'ValidationError';
}
throw new ValidationError('这是我的自定义');
try和throw
try {
  throw new Error('Hello World');
} catch (err) {
  console.error(err.message);// Hello World
}
try失效
try {
  ~!$%   // 无效代码
} catch(err) {
  // 这里捕获不到错误
  console.log("这里不会被执行");
}

报错

➤ ⓧ Uncaught SyntaxError: Invalid or unexpected token
异步捕获
try {
  setTimeout(function() {
    test;   // 未定义变量
  }, 1000);
} catch (err) {
  console.log("这里不会被执行");
}

需要更换一下方式

setTimeout(function() {
  try {
    test;
  } catch(err) {
    console.log("这里会捕获到错误");
  }
}, 1000);
嵌套
try {
  try {
    throw new Error('Hello world');
  } catch (err) {
    throw err; // 将错误向上抛出
  }
} catch (err) {
  console.error(err.message); // Hello world
}
邂逅Promise
Promise.resolve(1)
  .then(res => {
      console.log(res);  // 打印 '1'

      throw new Error('something went wrong');  // throw error

      return Promise.resolve(2);  // 这里不会被执行
  })
  .then(res => {
      // 这里也不会执行,因为错误还没有被处理
      console.log(res);    
  })
  .catch(err => {
      console.error(err.message);  // 打印 'something went wrong'
      return Promise.resolve(3);
  })
  .then(res => {
      console.log(res);  // 打印 '3'
  })
  .catch(err => {
      // 这里不会被执行
      console.error(err);
  })
邂逅async await
function handleErrors(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
}

(async function() {
    try {
      let response = await fetch("http://httpstat.us/500");
      handleErrors(response);
      let data = await response.json();
      return data;
    } catch (error) {
        console.log("Caught", error)
    }
})();

英目频道
名乎利乎,道路奔波休碌碌;来者往者,溪山清净且停停

路漫漫其修远兮,吾将上下而求索

67 声望
4 粉丝
0 条评论
推荐阅读
vue点击空白处
{代码...} 使用 {代码...}

yingmhd1阅读 1k

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan21阅读 1.6k评论 1

封面图
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图
学会这些 Web API 使你的开发效率翻倍
随着浏览器的日益壮大,浏览器自带的功能也随着增多,在 Web 开发过程中,我们经常会使用一些 Web API 增加我们的开发效率。本篇文章主要选取了一些有趣且有用的 Web API 进行介绍,并且 API 可以在线运行预览。C...

九旬13阅读 1.6k

封面图
用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!

熊的猫17阅读 1.5k评论 2

封面图

路漫漫其修远兮,吾将上下而求索

67 声望
4 粉丝
宣传栏