我这里有一个表单，重点关注这个el-date-picker
前端代码，很明显el-date-picker 绑定的是表单数据中的 ruleForm.datetime
<-- An highlighted block -->
<el-col :span="6">
<el-form-item label="时间范围" prop="datetime">
<el-date-picker
v-model="ruleForm.datetime "
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 90%"
:default-time="['00:00:00', '23:59:59']"
@change="changeDate"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
//........
export default {
//组件名称
............
data() {
//这里存放数据
return {
ruleForm: {
datetime: ['',''],
pur_category: '',
pur_state: '',
pur_type: '',
pur_range: '',
pur_dept:''
},
// ........
</script>
后端代码，提交表单后，数据就通过 axios发送到express,axios代码不是重点我不展示了
exports.getApproveList = async (req, res) => {
try {
// console.log(req.query);
const {
datetime ,currentDept,pur_category,pur_state ,pur_dept,pur_type,pur_range} = req.query
const datetime = ['','']
if(typeof req.query.datetime !== 'undefined'){
datetime = req.query.datetime
}
console.log(pur_category,pur_state ,pur_dept,pur_type,pur_range);
res.send({
// ------
})
} catch (err) {
res.cc('连接错误，无法查表', 1)
}
}
当我选择日期的时候，有一个可删除按钮，elementUI自带的
后台打印出请求信息
刚开始为空
选择日期后
当我点击了这个清空日期的按钮，再点击提交表单，开始会有些问题，输出undefined了
其实可能是点击清空后，req.query没有datetime 属性了
ruleForm: {
datetime: ['',''], // 被清除了，提交的时候没有该属性
pur_category: '',
pur_state: '',
pur_type: '',
pur_range: '',
pur_dept:''
},
exports.getApproveList = async (req, res) => {
try {
// 尝试解构出datetime ;
const {
datetime ,currentDept,pur_category,pur_state ,pur_dept,pur_type,pur_range} = req.query
const datetime = ['','']
但是想判断undefined，是不行的，如果 req.query 中没有 datetime 属性，那么这个条件判断会失败，代码不会执行赋值操作。
// 之所以写这段，因为清空后express接收到的是一个undefined,
//可惜在我这场景没办法执行
if(typeof req.query.datetime !== 'undefined'){
datetime = req.query.datetime
}
所以这个是try…catch…嵌套try…catch的问题吗？其实不是，主要是我一开始用了async
后端代码
exports.getApproveList = async (req, res) => {
try {
res.send({
// ------
})
} catch (err) {
res.cc('连接错误，无法查表', 1)
}
}
所以问题的根本，就是异步操作未处理：如果你的后端使用了异步操作，而这个判断位于一个异步函数或回调中，那么可能会出现未处理的异步操作导致的问题。例如，如果有一个异步操作依赖于 datetime 的值，而这个值没有正确设置，那么这个异步操作可能会失败或产生其他不可预料的行为。
exports.getApproveList = async (req, res) => {
try {
// 解构赋值（别直接拿datetime）
const {
pur_category,pur_state ,pur_dept,pur_type,pur_range} = req.query
const datetime = await getDatetimeFromQuery(req.query);
const pool = await poolPromise;
// -- sql操作
res.send({
// ------
})
} catch (err) {
res.cc('连接错误，无法查表', 1)
}
// 重点！！！！！！！！！！！！！！！！！
async function getDatetimeFromQuery(query) {
try {
if (typeof query.datetime !== 'undefined') {
return query.datetime;
} else {
return ['',''];
}
} catch (error) {
throw error;
}
}
}
这样子就好了