js中try、catch、finally、then使用 & 提交时校验form表单-valid & deep样式权重 & @import url(之导入公用样式& useRoute和useRouter

1、try —— 语句测试代码块的错误，一般把可能会出错的代码放到这里

2、catch —— 只有try里面的代码块发生错误时，才会执行这里的代码，参数err记录着try里面代码的错误信息

3、finally —— 无论有无异常里面代码都会执行

try catch缺点

try catch耗性能
try catch捕获不到异步错误
try catch可能会导致报错点更模糊

定义和用法

try语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
finally 语句在 try 和 catch 之后无论有无异常都会执行。
注意： catch 和 finally 语句都是可选的，但你在使用 try 语句时必须至少使用一个。

try { 
    tryCode - 尝试执行代码块 // 如果出错，抛出错误 } catch(err) { 
    catchCode - 捕获错误的代码块 } finally { 
    finallyCode - 无论 try / catch 结果如何都会执行的代码块 }

提示：

当错误发生时， JavaScript 会停止执行，并生成一个错误信息。

使用 throw 语句来创建自定义消息(抛出异常)。如果你将 throw 和 try 、 catch一起使用，就可以控制程序输出的错误信息。
比如：如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息：

var obj = { 
   name: 'sun'}; try { 
    if(!obj.age) throw 'age不存在' } catch(err) { 
    console.log("错误信息：" + err); } // 错误信息：age不存在

运行流程：
先执行try里面的代码，如果try里面的代码有错误，就执行catch里面的代码，否则不执行catch里面的代码
下面是一个例子：

var obj = { 
   name: 'sun'}; try { 
    console.log(obj.age.msg) } catch(err) { 
    console.log("错误信息：" + err.message); } // 错误信息：Cannot read properties of undefined (reading 'msg')

用途：一般用于可控的错误，而不是未知的错误，意思就是你很清楚这里可能出错，而且你很清楚什么前提下会出错，你就是要故意利用报错信息来区分错误，就可以把这段代码放进try内，然后出错误的时候就会自动去执行catch里面的代码。

场景：

1.浏览器兼容问题

每个浏览器都有自身的兼容问题，所以try catch能很好的将异常捕获，每个浏览器的异常报错提示也是不一样的，我们就可以在catch里面将报错抛出并作出对应的措施。

2.判断代码非法性

try{ 
    console.log(sun) } catch(e){ 
    console.log('捕获到异常：',e); } // 捕获到异常： ReferenceError: sun is not defined

try{ 
    1===2 } catch{ 
    console.log("不执行") } // false

3.try catch只能捕捉到同步的异常，异步的异常无法捕获

try{ 
    setTimeout(()=>{ 
    console.log(sun) },1000) } catch(e){ 
    console.log('捕获到异常：',e); } // 报错：Uncaught ReferenceError: sun is not defined

执行顺序

try里面的代码报错的时候，catch里面的代码才会执行，finally里面的代码永远会执行
catch和finally里面，正常的代码会从上到下顺序执行
如果只是catch里面代码出错，则报catch里面的错误
如果catch和finally都出错，则会报finally里面的错误

示例

效果图

在这里插入图片描述

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>请输入 5 和 10 之间的一个数:</p> <input id="demo" type="text"> <button type="button" onclick="myFunction()">检测输入</button> <p id="message"></p> <script> function myFunction() { 
      var message, x; message = document.getElementById("message"); message.innerHTML = ""; x = document.getElementById("demo").value; try { 
      if (x == "") throw "为空"; if (isNaN(x)) throw "不是一个数字"; if (x > 10) throw "太大了"; if (x < 5) throw "太小了"; } catch (err) { 
      message.innerHTML = "输入的值 " + err; } } </script> </body> </html>

实例

demo.vue

<template> <div class="box-form"> <el-form ref="formRef" class="inline-form" :disabled="routeType === 'view'" label-width="140px" :model="formInline.formData" > <el-form-item class="width25" :label="mark.projectRole == '1' ? '项目名称：' : '课题名称：'" prop="prjName" :rules="{ required: true, message: `请选择${mark.projectRole == '1' ? '项目名称' : '课题名称'}`, trigger: ['blur', 'change'], }" > <el-input v-model="formInline.formData.prjName" :disabled="routeType === 'view'" maxlength="50" placeholder="按任务书填写项目名称" /> </el-form-item> </el-form> </div> <div> <el-button v-throttle="3000" style="margin: 5px 20px 0 0px" type="primary" @click="submit('save')" > 保存 </el-button> <el-button v-if="routeType !== 'view'" v-throttle="3000" style="margin: 5px 20px 0 0px" type="primary" @click="submit('submit')" > 提交 </el-button> </div> </template> <script setup> const formRef = ref(null) const formInline = ref({}) const route = useRoute() const router = useRouter() const submit = async (type) => { const params = { prjTopics: ruleForm1.toList, ...formInline } await formRef.value.validate((valid) => { if (!valid) { // 提交时对form表单进行校验 return } else { const loading = ElLoading.service({ lock: true, text: '加载中......', background: 'rgba(0, 0, 0, 0.7)', }) if (type === 'save') { savePrj({ ...formInline.value.formData, ...params }) .then((res) => { const { code } = res if (code === '00000') { ElMessage({ type: 'success', message: '保存成功', }) goBack() } else { ElMessage({ type: 'error', message: res.message, }) } }) .finally(() => { //finally用法 loading.close() }) } if (type === 'submit') {} } const goBack = async () => { router.push('/project/approval') } </script> <style lang="scss" scoped> @import url("../style/main.scss"); //公用样式写法 :deep() { // 加大样式权重 .ym-dialog__body { padding: 0px 18px; } } .six, .seven { position: relative; margin-top: 20px; } </style>

到此这篇js中try、catch、finally、then使用 & 提交时校验form表单-valid & deep样式权重 & @import url(之导入公用样式& useRoute和useRouter的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇： vue3进阶(一)——Promise.all请求多个接口的写法& 表单必填校验后再保存或提交 & @import url导入公共样式& module.exports定义对象和require导入js文件

下一篇： vue3封装表格弹框组件——表格单选、axios动态接口、toRefs()用法、loading自定义、表格内容超出高度滚动

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10764.html