我这里有一个表单,重点关注这个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;
}
}
}
这样子就好了