浅析JavaScrip如何实现优雅地退出函数
作者：蚂小蚁
前言
退出函数怎么写？有人会说一个 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.reject 退出异步函数：
async function validate() {
return Promise.reject();
}
所以如果想退出函数可以先将函数改为 async 函数，然后返回一个 reject 状态的 Promise，这样就能够退出函数了。
总结
最后，总结一下所有退出函数的方法：
- 函数返回一个布尔值，根据这个布尔值判断是否 return 退出函数
- 抛出异常退出函数，注意异步函数需要加上 await，否则无法退出
- 将普通函数转为异步函数，然后返回一个 reject 状态的 Promise，也可以实现退出函数的目的
到此这篇关于浅析JavaScrip如何实现优雅地退出函数的文章就介绍到这了,更多相关JavaScrip退出函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家