前端开发中的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 对象继承而来的
- EvalError:表示关于全局
eval()
函数的错误,这个异常不再由 JS 抛出,它的存在是为了向后兼容。 - RangeError:当引用一个不存在的变量时,将引发 ReferenceError。
- SyntaxError:当你在 JS 代码中使用任何错误的语法时,都会引发
SyntaxError
。 - TypeError:如果该值不是预期的类型,则抛出
TypeError
。比如1();
- URIError:如果以错误的方式使用全局 URI 方法,则会抛出
URIError
。比如decodeURI("%%%");
try不可独身
try {
throw new Error('Hello World');
}
ⓧ Uncaught SyntaxError: Missing catch or finally after try
每个try
块必须与至少一个catch
或finally
块,否则会抛出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)
}
})();
英目频道
名乎利乎,道路奔波休碌碌;来者往者,溪山清净且停停
推荐阅读
vue点击空白处
{代码...} 使用 {代码...}
yingmhd赞 1阅读 1k
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...
chokcoco赞 20阅读 2.1k评论 2
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...
边城赞 17阅读 1.9k
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...
XboxYan赞 21阅读 1.6k评论 1
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...
wuwhs赞 17阅读 2.4k
学会这些 Web API 使你的开发效率翻倍
随着浏览器的日益壮大,浏览器自带的功能也随着增多,在 Web 开发过程中,我们经常会使用一些 Web API 增加我们的开发效率。本篇文章主要选取了一些有趣且有用的 Web API 进行介绍,并且 API 可以在线运行预览。C...
九旬赞 13阅读 1.6k
用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!
熊的猫赞 17阅读 1.5k评论 2
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。