JS try catch 与 return 的陷阱

25_12:24_Z0NSqN

普通 try catch

如下代码输出是？

const foo = () => {
    try {
        console.log(1);
    } catch (error) {
        console.log(2);
    } finally {
        console.log(3);
    }
};

console.log('foo()', foo());

执行步骤：

定义函数 foo 变量
执行外层 log
执行 foo 函数
走到 try 输出 1
由于 try 内的代码没有报错，所以不执行
走到 finally 输出 3
最后回到外层 log，输出 undefined

所以输出是：

25_12:26_fvJYiy

下面增加难度

try 里面 return

留意注释，标注了代码变更：

const foo = () => {
    try {
        console.log(1);
        return 4; // 新增代码
    } catch (error) {
        console.log(2);
    } finally {
        console.log(3);
    }
};

console.log('foo()', foo());

try 里面加了 return，那么 finally 的代码还会执行吗？会的。

25_12:26_qggQrw

输出如下：

25_12:27_voDM0A

即使 try 里面有 return，那么 finally 仍然会执行。

咦，那如果 finally 也有 return 呢？函数就能返回两个值了？

try 和 finally 都有 return

const foo = () => {
    try {
        console.log(1);
        return 4;
    } catch (error) {
        console.log(2);
    } finally {
        console.log(3);
        return 5; // 新增代码
    }
};

console.log('foo()', foo());

finally 的 return 会覆盖掉 try 的 return。

25_12:28_aoBwaL

这代码怎么越来越奇怪了呀，确实，并不推荐 finally 里写 return，正常写法应该是你需要 foo 函数的返回值，那么代码正常的话，就应该是在 try 里 return，代码抛出异常的话，就应该在 catch 里 return，finally 应该只做一些 try 和 catch 都做出的时，比如关闭 loading：

const foo = async () => {
    try {
        this.loading = true;
        const data = await fetch('xxx');
        return data.list;
    } catch (error) {
        return [];
    } finally {
        this.loading = false;
    }
};

这才是更合理的写法。

25_12:28_UtkRqr

普通 try catch #

try 里面 return #

try 和 finally 都有 return #

普通 try catch

try 里面 return

try 和 finally 都有 return