本文探讨在 JavaScript 中优雅退出函数的多种方案。传统使用 return 配合布尔值会增加耦合,本文推荐通过抛出异常(throw new Error)实现即时退出,并详解异步函数中需配合 await 或返回 Promise.reject 状态的处理方式,帮助开发者避免冗余的条件判断。
前言
如何终止函数的执行?有人可能会认为仅仅使用一个 return 语句即可,但实际情况是否如此简单?让我们通过一个包含表单校验与提交逻辑的函数示例来深入分析:
// 表单校验
function validate() {}
// 提交表单
function submit() {
validate();// ?如果表单校验失败怎么退出函数呢?
fetch("/api/submit", {
// ...
});
}当表单校验未通过时,传统思路通常依赖于使用 return 语句来解决问题,即让 validate 函数返回一个特定值,以便调用方判断是终止函数还是继续后续逻辑:
function validate() {}
function submit() {
+ if (!validate()) {
+ return;
+ }
fetch("/api/submit", {
// ...
});
}
虽然这种方案可行,但并非最佳实践。原因在于 validate 函数原本的设计并不需要返回值,为了支持退出逻辑而强行添加返回值,会导致 submit 函数与 validate 函数之间产生不必要的依赖,增加了代码耦合度。如何实现更优雅的退出方式,是本文的核心议题。
抛出异常
第一种推荐方案是抛出异常,该方法在实际开发中效果显著。以上述案例为例,展示如何通过抛出异常来强制退出函数:
// 表单校验
function validate() {
+ throw new Error("验证失败");
}
// 提交表单
function submit() {
validate();// ?如果表单校验失败怎么退出函数呢?
fetch("/api/submit", {
// ...
});
}如果 submit 函数内部包含多个处理流程,且其中某个分支需要终止整个 submit 函数的执行,使用抛出异常的方式可以大幅减少嵌套的 if-else 判断逻辑。例如:
// 提交表单
function submit() {
validate();// ?如果表单校验失败怎么退出函数呢?
doSomething1();
doSomething2();
fetch("/api/submit", {
// ...
});
}
然而,这种方式存在一个明显的缺点:控制台会显示红色的错误堆栈信息。不过,通过观察错误信息可以明确识别出这是人为抛出的异常,而非程序本身的运行错误:

抛出异常的方法同样适用于异步函数,但书写方式需要调整。首先,我们来看看如果不改变原有写法会发生什么:
+ async function validate() {
throw new Error("validate failed");
}
+ async function submit() {
validate();
fetch("/api/submit", {
// ...
});
}
为什么此时抛出异常未能生效?要解答这个问题,我们需要对这段代码的执行逻辑进行“翻译”解析:
function validate() {
+ return Promise.reject(new Error("validate failed"));
}
显然,此时函数并未真正抛出异常,而是异常被 Promise 对象捕获并拦截,导致 退出函数 操作失败。只需在调用处增加一个 await 关键字,即可正常退出函数:
async function submit() {
+ await validate();
fetch("/api/submit", {
// ...
});
}
异步函数 reject
前文提到抛出异常可以退出异步函数,但这并非唯一途径。另一种方式是通过返回一个拒绝状态的 Promise 来退出异步函数:
async function validate() {
return Promise.reject();
}
因此,若要退出异步函数,可以先将函数声明为 async 函数,然后返回一个处于 reject 状态的 Promise 对象,即可达到退出函数的目的。
总结
最后,对所有退出函数的方法进行全面总结:
- 函数返回一个布尔值,根据该布尔值判断是否执行 return 以退出函数
- 抛出异常退出函数,需注意在异步函数中必须配合 await 使用,否则无法生效
- 将普通函数转换为异步函数,并返回一个处于 reject 状态的 Promise,同样可以实现退出函数的效果
到此这篇关于浅析JavaScript如何实现优雅地退出函数的文章就介绍到这了,更多相关JavaScript退出函数内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站