副队长JavaScript教程(48)-异常处理基础

点此查看 所有教程、项目、源码导航

文章目录

[1. 背景](#1. 背景)
[2. 异常是什么](#2. 异常是什么)
[3. try catch finally 基础语法](#3. try catch finally 基础语法)
- [3.1 try](#3.1 try)
- [3.2 catch](#3.2 catch)
- [3.3 finally](#3.3 finally)
[4. 错误对象 err 的常用属性](#4. 错误对象 err 的常用属性)
[5. 典型实战场景：调用不存在的函数](#5. 典型实战场景：调用不存在的函数)
[6. 重要注意点](#6. 重要注意点)
[7. 小结](#7. 小结)

1. 背景

前面我们写的 JS 代码，都是预期能够正常运行的代码。

但是在实际开发里，总会出现意外情况：访问不存在的属性、调用一个不存在的函数等等。

一旦代码发生错误，JS 的默认行为是：直接终止后续所有代码执行 。

很多时候我们不希望程序直接崩溃退出，而是希望捕获错误、给出提示，让程序可以继续往下跑。

JS 给我们提供了异常捕获语法：try catch finally，本篇我们就来学习它。

2. 异常是什么

异常，也叫运行时错误。

简单理解：代码语法没问题，能够正常被浏览器解析，但是在执行的时候遇到了无法处理的情况，就会抛出异常。

我们先看一段出错的代码：

js 复制代码

console.log("代码开始执行");
// 变量abc没有定义，会抛出引用错误
console.log(abc);
console.log("代码结束执行");

运行结果：

控制台报错，提示abc is not defined，也就是abc未定义的意思。

错误一旦抛出，整条执行流程就断掉了。

这就是我们需要异常捕获的原因：把错误 "接住"，不让整个程序直接崩掉。

3. try catch finally 基础语法

js 复制代码

try {
    // 这里放我们认为有可能出错的代码
} catch (err) {
    // 捕获到错误之后，执行这里的代码
} finally {
    // 无论有没有报错，这里的代码一定会执行
}

3.1 try

try 代码块里面，用来包裹有风险、可能抛出错误 的代码。

JS 会尝试执行 try 里面的语句。

如果里面一切正常，不会进入 catch；一旦抛出异常，立刻停止 try 内部后续代码，跳转到 catch。

3.2 catch

catch 用来接收捕获到的错误。

括号里的 err 是一个错误对象，里面保存了这次错误的相关信息。

我们写一个示例：

js 复制代码

try {
    console.log("try内部代码开始");
    console.log(abc);
    console.log("try内部代码结束");
} catch (err) {
    console.log("捕获到异常了");
    console.log("错误信息：", err.message);
}
console.log("外部代码继续执行");

运行逻辑：

执行 console.log("try内部代码开始")；
console.log(abc) 报错，立刻终止 try 里面剩下代码；
进入 catch，拿到错误对象 err，打印信息；
catch 执行完毕，继续运行 catch 外面的代码。

对比前面不加 try-catch 的例子：外部代码不会被阻断了。

3.3 finally

finally 是可选的代码块。

不管 try 里面有没有报错，不管 catch 是否执行，finally 里面的代码一定执行。

js 复制代码

try {
    console.log("try执行");
    // console.log(abc);
} catch (err) {
    console.log("捕获错误：", err.message);
} finally {
    console.log("finally 一定会执行");
}

开发里 finally 适合做收尾工作：关闭加载提示、释放资源、清空等待状态。

一个容易踩的小知识点：哪怕 try 或者 catch 里面写了 return，finally 依然会执行。

4. 错误对象 err 的常用属性

当异常被捕获，catch 拿到的 err 是一个内置错误对象，自带两个最常用属性。

js 复制代码

try {
    console.log(abc);
} catch (err) {
    console.log(err.name);    // 错误类型名称
    console.log(err.message); // 错误的文字描述
}

控制台输出如下：

name：错误类型，例如 ReferenceError、TypeError，这个下一篇具体讲解。
message：具体的错误文字，用来告诉我们哪里出了问题

5. 典型实战场景：调用不存在的函数

调用不存在的函数是很常见的运行时错误，适合用来演示 try-catch 的用处。

js 复制代码

try {
    // 函数 fn 没有定义
    fn();
    console.log("函数调用成功");
} catch (err) {
    console.log("函数调用出错：", err.message);
}
console.log("后面的代码继续运行");

运行结果：

如果不加捕获，一旦调用不存在的函数，后面代码全部停止。

6. 重要注意点

try 只能捕获运行时异常；语法错误（少写括号、少写引号）属于解析阶段错误，try-catch 抓不住。
try 不要无脑包裹全部代码，只包裹真正有可能出错的一小段，方便定位问题。
catch 不要空着什么都不写，空 catch 会悄悄吞掉错误，调试的时候很难发现问题。

7. 小结

代码抛出异常之后，默认会终止后续代码运行；
try：尝试执行风险代码；catch：接住异常，做容错处理；finally：无论如何都执行的收尾代码；
catch 的 err 错误对象，可以通过 message、name 查看错误详情；
常见使用场景：调用函数、访问对象属性等容易发生意外的地方。

预告：下一篇我们学习 throw 主动抛出异常，认识 JS 内置的各类错误类型，以及异常处理的编码规范。