脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScrip退出函数

浅析JavaScrip如何实现优雅地退出函数

 更新时间：2024年03月22日 10:11:37   作者：蚂小蚁  
退出函数怎么写？有人会说一个 return 就退出函数了,有这么简单吗？这篇文章小编就来和大家详细聊聊如何在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退出函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家

您可能感兴趣的文章:

相关文章

  • TypeScript环境搭建并且部署到VSCode的详细步骤

    TypeScript环境搭建并且部署到VSCode的详细步骤

    本文给大家介绍TypeScript环境搭建并且部署到VSCode的详细步骤，本文分步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2021-11-11
  • js屏蔽F12审查元素，禁止修改页面代码等实现代码

    js屏蔽F12审查元素，禁止修改页面代码等实现代码

    有时候我们需要屏蔽客户端的F12，以防菜鸟也可以随意修改我们的代码，也处于源码的保护等操作，这里就为大家分享一下常见的代码
    2020-10-10
  • Javascript中引用类型传递的知识点小结

    Javascript中引用类型传递的知识点小结

    这篇文章主要给大家介绍了关于Javascript中引用类型传递的知识点，文中介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-03-03
  • Js获取当前日期时间及格式化代码

    Js获取当前日期时间及格式化代码

    这篇文章主要为大家详细介绍了Js获取当前日期时间及格式化代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 微信小程序如何通过用户授权获取手机号(getPhoneNumber)

    微信小程序如何通过用户授权获取手机号(getPhoneNumber)

    这篇文章主要介绍了微信小程序如何通过用户授权获取手机号(getPhoneNumber),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • 基于JS实现禁止查看源码及获取键盘的按键值

    基于JS实现禁止查看源码及获取键盘的按键值

    这篇文章主要介绍了基于JS实现禁止查看源码及获取键盘的按键值,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-02-02
  • 鸿蒙系统中实现图片上传功能全流程

    鸿蒙系统中实现图片上传功能全流程

    在鸿蒙系统中实现图片上传功能,整体流程可以类比为 “选快递→填单→发货→签收” 的过程,下面给大家介绍鸿蒙系统中实现图片上传功能全流程,感兴趣的朋友一起看看吧
    2025-04-04
  • JS实现向iframe中表单传值的方法

    JS实现向iframe中表单传值的方法

    这篇文章主要介绍了JS实现向iframe中表单传值的方法,涉及js针对页面元素及表单属性操作相关实现技巧,需要的朋友可以参考下
    2017-03-03
  • html嵌入javascript代码的三种方式

    html嵌入javascript代码的三种方式

    本文详细介绍了html嵌入javascript代码的三种主要方式：脚本块的方式、引入外部独立的.js文件、事件句柄是以html标签的属性存在的，有感兴趣了解的同学可以借鉴阅读
    2023-03-03
  • JS图片懒加载技术实现过程解析

    JS图片懒加载技术实现过程解析

    这篇文章主要介绍了JS图片懒加载技术实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07

最新评论