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/finally 语句用于处理代码中可能出现的错误信息。
错误可能是语法错误，通常是程序员造成的编码错误或错别字。也可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。
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
注意：合法判断不会走catch
比如：
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>