最近在用vue3的promise和异步时候出现问题，就是上面描述的那样，中间某个请求响应超时，之后的请求不在向后台发送请求了
BXZPQB@%UPY8D`]`})PSM5I.jpg
代码
const myGetCtrlClock = (params: { controllerId: string }) => {
let tempElement: any = '';
listData.value.forEach((element) => {
if (element.id == params.controllerId) {
tempElement = element;
}
});
return new Promise((resolve, reject) => {
let executeResult = 0; //返回设置成功或失败
getCtrlTime(params)
.then((res) => {
let code = res.code; //请求状态码
let msg: any = ''; //返回信息
let msgName = ''; //命令名称
if (code == 200 || code == 500) {
let resData = res.message;
resData = JSON.parse(resData);
msg = resData.detailList;
msgName = resData.name; //命令的名称
executeResult = resData.detailList[resData.detailList.length - 1].executeResult; //成功 失败
resolve(resData);
} else {
message.error('命令下发出错,请稍后重试!');
}
tempElement.msg = msg;
tempElement.msgName = msgName;
})
.catch((error) => {
console.log(error);
//resolve(new Error('fail'));
tempElement.msgName = '命令下发失败,请稍重试...';
})
.finally(() => {});
});
};
case 2: //读控制器时钟
// e.operateId.forEach((val) => {
// listData.value.forEach((element) => {
// if (element.id == val) {
// element.msgName = '命令正在下发,请稍后...';
// }
// });
// myGetCtrlClock({ controllerId: String(val) });
// });
for (let dataArryKey in e.operateId) {
let val = e.operateId[dataArryKey];
listData.value.forEach((element) => {
if (element.id == val) {
element.msgName = '命令正在下发,请稍后...';
}
});
await myGetCtrlClock({ controllerId: String(val) });
}
break;
查阅资料，第一个对象需要等到一个pomise对象值才会去执行下一个的请求，然后因为响应超时，代码进入到catch,但是有个疑惑用reject返回一个对象也是promise但是代码之后还是不会继续请求
，所以最后在catch中加入一句： resolve(new Error('fail'))
全部代码:
<template>
<PageWrapper
:class="prefixCls"
title="控制器列表"
:column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
v-loading="loadingRef"
loading-tip="加载中..."
>
<div :class="`${prefixCls}__top`">
<div class="btnGroupBox">
<div class="inputBox">
<a-checkbox v-model:checked="checkAll" @change="onCheckAllChange" />
<a-select
class="selectInput"
style="width: 184px"
v-model:value="value1"
:options="options1"
@change="selectClick"
/>
<a-select
class="selectInput"
v-model:value="value2"
:options="options2"
@change="selectClick2"
/>
<a-input-search
class="selectInput"
v-model:value="value3"
placeholder="请输入控制器名称"
enter-button
@search="clickSearch"
/>
</div>
<div class="btnBox">
<!-- <a-tooltip>
<template #title>全选</template>
<a-button color="" :iconSize="18" preIcon="mdi-light:refresh" shape="circle" />
</a-tooltip> -->
<a-tooltip>
<template #title>刷新</template>
<a-button
color=""
:iconSize="18"
preIcon="mdi-light:refresh"
shape="circle"
@click="refresh"
/>
</a-tooltip>
<a-tooltip>
<template #title>新增</template>
<a-button
color=""
:iconSize="18"
preIcon="ic:baseline-add"
shape="circle"
@click="addClick"
/>
</a-tooltip>
<a-tooltip>
<template #title>删除</template>
<a-button
color=""
:iconSize="18"
preIcon="ic:baseline-remove"
shape="circle"
@click="deleteCtrl"
/>
</a-tooltip>
<a-tooltip>
<template #title>设置</template>
<a-button
color=""
:iconSize="18"
preIcon="mdi-light:cog"
shape="circle"
@click="operateClick"
/>
</a-tooltip>
</div>
</div>
<!-- <div class="checkBtnBox"> </div> -->
</div>
<div :class="`${prefixCls}__content`">
<a-checkbox-group v-model:value="ctrlIdList" style="width: 100%">
<a-list :pagination="pagination">
<template v-for="(item, i) in listData" :key="item.id">
<a-list-item class="list" :class="i % 2 == 1 ? 'table-striped' : null">
<a-list-item-meta>
<template #avatar>
<a-checkbox :value="item.id" />
</template>
<template #title>
<span class="loopName">{{ item.controllerName }}</span>
<div class="extra">
<a-tag @click="editClick(item.id)">编辑</a-tag>
<a-tag @click="watchClick(item.id, i)">查看</a-tag>
</div>
</template>
<template #description>
<a-descriptions
layout="vertical"
:column="{ xxl: 7, xl: 7, lg: 6, md: 2, sm: 2, xs: 2 }"
class="info"
@dblclick="watchClick(item.id, i)"
>
<a-descriptions-item label="分组">
{{ item.circuitControllerGroupName }}
</a-descriptions-item>
<a-descriptions-item label="通讯地址">
{{ item.controllerAddress }}
<a-tag color="red" class="tagStyle" v-if="item.controllerState == 0"
>离线
</a-tag>
<a-tag color="cyan" class="tagStyle" v-else>在线</a-tag>
</a-descriptions-item>
<a-descriptions-item label="所属网关">
{{ item.gatewayName }}
<a-tag class="tagStyle offLine" v-if="item.gatherState == 0">离线</a-tag>
<a-tag class="tagStyle onLine" v-else>在线</a-tag>
</a-descriptions-item>
<a-descriptions-item label="控制器铭牌">
{{ item.controllerBrand }}
</a-descriptions-item>
<a-descriptions-item label="更新时间">
{{ item.lastCommunicationTime }}
</a-descriptions-item>
<a-descriptions-item label="回路开关">
<div v-for="(loop, i) in item.lampLoopList" :key="i">
<a-tooltip>
<template #title>{{ loop.loopName }}</template>
<a-tag v-if="loop.lampState === 1" class="tagStyle lightOn">
{{ i + 1 }}
</a-tag>
<a-tag v-else-if="loop.lampState === 0" class="tagStyle lightOff"
>{{ i + 1 }}
</a-tag>
<a-tag v-else-if="loop.lampState === 2" class="tagStyle lightNoConfigure"
>{{ i + 1 }}
</a-tag>
</a-tooltip>
</div>
</a-descriptions-item>
<a-descriptions-item label="消息">
<span class="myMsg">
<span class="blue">{{ item.msgName }}</span>
<span
v-for="(listItem, listI) in item.msg"
:key="listI"
:class="listItem.executeResult == 0 ? 'red' : 'green'"
>
<!-- <br />-->
{{ listItem.message }}</span
>
</span>
</a-descriptions-item>
</a-descriptions>
</template>
</a-list-item-meta>
</a-list-item>
</template>
</a-list>
</a-checkbox-group>
</div>
<div class="paginationBox">
<a-pagination
size="small"
:total="totalPage"
:show-total="(total) => `共 ${total} 条`"
show-size-changer
show-quick-jumper
@change="pageChange"
:current="current"
/>
</div>
<modal
v-if="modalIsCreate"
v-model:visible="modalVisible"
:checkListIndex="checkListIndex"
:changeAliveModal="changeAliveModal"
/>
<modalAdd
v-if="modalAddIsCreate"
v-model:visible="modalAddVisible"
:currentPage="current"
@indexEvent="getCircuitCtrList"
/>
<modalOperate
v-if="modalOperateIsCreate"
v-model:visible="modalOperateVisible"
@operateUpdateList="operateUpdateList"
/>
<modal-compile
v-if="modalCompileIsCreate"
v-model:visible="modalCompileVisible"
:changeAlive="changeAlive"
:currentPage="current"
@indexEvent="getCircuitCtrList"
/>
</PageWrapper>
</template>
<script lang="ts">
import {
defineComponent,
reactive,
toRefs,
watch,
ref,
onMounted,
provide,
unref,
createVNode,
} from 'vue';
import Icon from '/@/components/Icon/index';
import { PageWrapper } from '/@/components/Page';
import { List, Progress, Row, Col, message, Modal } from 'ant-design-vue';
import { CollapseContainer } from '/@/components/Container';
import { SelectTypes } from 'ant-design-vue/lib/select';
// import { getLoopList, getLoopListByName } from '/@/api/sys/user';
import modalAdd from '/@/views/realtimeMonitor/controllerList/modalAdd.vue'; //新增弹窗
import modalOperate from '/@/views/realtimeMonitor/controllerList/modalOperate.vue'; //设置弹窗
import modalCompile from '/@/views/realtimeMonitor/controllerList/modalCompile.vue'; //编辑弹窗
import modal from './modal.vue'; //查看弹窗
import {
getCircuitController,
getCtrlListOnCondition,
getCtrlListByCtrlName,
getLoopGroupList,
deleteController,
getCtrlTime,
setCtrlTime,
} from '/@/api/sys/user';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
export default defineComponent({
name: 'ControllerList',
components: {
modal,
modalOperate,
modalAdd,
modalCompile,
Icon,
Progress,
PageWrapper,
[List.name]: List,
[List.Item.name]: List.Item,
AListItemMeta: List.Item.Meta,
[Row.name]: Row,
[Col.name]: Col,
// BasicForm,
CollapseContainer,
},
setup() {
const loadingRef = ref(true); //loading默认参数
const value1 = ref('-1'); //回路分组默认值
const value2 = ref('2'); //在线状态默认值
const value3 = ref(''); //搜索框默认值
let modalVisible = ref(false); //弹出框默认状态
const pageSize = ref(10); //默认每页的总条目数
let totalPage = ref(50); //默认分页器总条数
let modalAddVisible = ref(false); //新增弹窗的默认状态
let modalOperateVisible = ref(false); //批量操作默认状态
let modalCompileVisible = ref(false); //编辑操作状态
const modalIsCreate = ref(false);
const modalAddIsCreate = ref(false);
const modalOperateIsCreate = ref(false);
const modalCompileIsCreate = ref(false);
let ctrlId = ref<number>(0); //选中的控制器id
let checkListIndex = ref<number>(); //查看框选中的下标值
let current = ref(1); //当前页码
let operateId = ref<any>([]); //批量控制列表ID
provide('operateId', operateId);
//勾选控制器的id数组
const ctrlIdList = ref([]);
// 分组参数
const options1 = ref([
{
value: '-1',
label: '全部分组',
},
]);
// 在线状态参数
const options2 = ref<SelectTypes['options']>([
{
value: '2',
label: '控制器在线状态',
},
{
value: '1',
label: '在线',
},
{
value: '0',
label: '离线',
},
]);
let listData = ref([]); //回路列表数据
provide('ctrlId', ctrlId);
provide('ctrlData', listData);
let plainOptions = ref([]); //Checkbox 数据
//获取控制器的列表
const getCircuitCtrList = (currentPage: string, size: string) => {
getCircuitController(currentPage, size).then((res) => {
let resData = res.data.dataList;
totalPage.value = res.data.total;
pageSize.value = res.data.size;
listData.value = resData;
let tempArry: any = [];
resData.forEach((val: { id: number }) => {
tempArry.push(val.id);
val.msg = null; //回路消息 储存变量
val.msgName = ''; //回路消息的命令名称
});
plainOptions.value = tempArry;
loadingRef.value = false;
});
};
//新增控制器事件
const addClick = () => {
modalAddVisible.value = true;
modalAddIsCreate.value = true;
};
//编辑控制器事件
const editClick = (index) => {
//将选中编辑行的id传到子组件
ctrlId.value = index;
modalCompileIsCreate.value = true;
modalCompileVisible.value = true;
};
//查看控制器信息事件
const watchClick = (id, index) => {
console.log(id);
ctrlId.value = id;
checkListIndex.value = index;
modalIsCreate.value = true;
modalVisible.value = true;
};
//改变编辑组件的生命周期
const changeAlive = () => {
modalCompileIsCreate.value = false;
};
const changeAliveModal = () => {
modalIsCreate.value = false;
};
//批量操作后更新列表
const operateUpdateList = async (e) => {
//父组件接收传值
switch (Number(e.zIndex)) {
case 1: //控制器校时
// e.operateId.forEach((val) => {
// listData.value.forEach((element) => {
// if (element.id == val) {
// element.msgName = '命令正在下发,请稍后...';
// }
// });
// mySetCtrlClock({ controllerId: String(val) });
// });
for (let dataArryKey in e.operateId) {
let val = e.operateId[dataArryKey];
listData.value.forEach((element) => {
if (element.id == val) {
element.msgName = '命令正在下发,请稍后...';
}
});
await mySetCtrlClock({ controllerId: String(val) });
}
break;
case 2: //读控制器时钟
// e.operateId.forEach((val) => {
// listData.value.forEach((element) => {
// if (element.id == val) {
// element.msgName = '命令正在下发,请稍后...';
// }
// });
// myGetCtrlClock({ controllerId: String(val) });
// });
for (let dataArryKey in e.operateId) {
let val = e.operateId[dataArryKey];
listData.value.forEach((element) => {
if (element.id == val) {
element.msgName = '命令正在下发,请稍后...';
}
});
await myGetCtrlClock({ controllerId: String(val) });
}
break;
default:
break;
}
};
//读取控制器的时间 index=下标值 params=请求参数
const myGetCtrlClock = (params: { controllerId: string }) => {
let tempElement: any = '';
listData.value.forEach((element) => {
if (element.id == params.controllerId) {
tempElement = element;
}
});
return new Promise((resolve, reject) => {
let executeResult = 0; //返回设置成功或失败
getCtrlTime(params)
.then((res) => {
let code = res.code; //请求状态码
let msg: any = ''; //返回信息
let msgName = ''; //命令名称
if (code == 200 || code == 500) {
let resData = res.message;
resData = JSON.parse(resData);
msg = resData.detailList;
msgName = resData.name; //命令的名称
executeResult = resData.detailList[resData.detailList.length - 1].executeResult; //成功 失败
resolve(resData);
} else {
message.error('命令下发出错,请稍后重试!');
}
tempElement.msg = msg;
tempElement.msgName = msgName;
})
.catch((error) => {
console.log(error);
resolve(new Error('fail'));
tempElement.msgName = '命令下发失败,请稍重试...';
})
.finally(() => {});
});
};
//设置控制器的时间 index=下标值 params=请求参数
const mySetCtrlClock = (params: { controllerId: string }) => {
let tempElement: any = '';
listData.value.forEach((element) => {
if (element.id == params.controllerId) {
tempElement = element;
}
});
return new Promise((resolve, reject) => {
let executeResult = 0; //返回设置成功或失败
setCtrlTime(params)
.then((res) => {
let code = res.code; //请求状态码
let msg: any = ''; //返回信息
let msgName = ''; //命令名称
if (code == 200 || code == 500) {
let resData = res.message;
resData = JSON.parse(resData);
msgName = resData.name; //命令的名称
msg = resData.detailList;
executeResult = resData.detailList[resData.detailList.length - 1].executeResult; //成功 失败
resolve(resData);
} else {
message.error('命令下发出错,请稍后重试!');
}
if (executeResult) {
//设置成功 赋值改变回路列表状态
tempElement.controllerState = true;
}
tempElement.msg = msg;
tempElement.msgName = msgName;
})
.catch((error) => {
console.log(error);
resolve(new Error('fail'));
tempElement.msgName = '命令下发失败,请稍重试...';
})
.finally(() => {});
});
};
onMounted(() => {
getCircuitCtrList('1', '10');
});
//分页器事件
const pageChange = (page, pageSize) => {
current.value = page; //更改页码
getCircuitCtrList(page, pageSize);
};
//第一个下拉选框事件
const selectClick = () => {
getCtrlListOnCondition(
value1.value,
value2.value,
value3.value,
'1',
String(pageSize.value),
).then((res) => {
let resData = res.data.dataList;
totalPage.value = res.data.total;
pageSize.value = res.data.size;
listData.value = resData;
let tempArry: any = [];
resData.forEach((val: { id: number }) => {
tempArry.push(val.id);
});
plainOptions.value = tempArry;
});
};
//第二个下拉框事件
const selectClick2 = () => {
getCtrlListOnCondition(
value1.value,
value2.value,
value3.value,
'1',
String(pageSize.value),
).then((res) => {
let resData = res.data.dataList;
totalPage.value = res.data.total;
pageSize.value = res.data.size;
listData.value = resData;
let tempArry: any = [];
resData.forEach((val: { id: number }) => {
tempArry.push(val.id);
});
plainOptions.value = tempArry;
});
};
//搜索框事件
const clickSearch = () => {
let reg = /[`~!#$%^&*()_\+=<>?:"{}|~！#￥%……&*（）={}|《》？：“”【】、；‘’，.。、\s+]/g; //匹配特殊字符
if (reg.test(value3.value)) {
message.error('不可输入特殊字符!');
} else {
getCtrlListOnCondition(
value1.value,
value2.value,
value3.value,
'1',
String(pageSize.value),
).then((res) => {
let resData = res.data.dataList;
totalPage.value = res.data.total;
pageSize.value = res.data.size;
listData.value = resData;
let tempArry: any = [];
resData.forEach((val: { id: number }) => {
tempArry.push(val.id);
});
plainOptions.value = tempArry;
});
}
};
//多选框参数
const state = reactive({
indeterminate: false,
checkAll: false, // 初始化全选按钮, 默认不选
checkedList: [], //Checkbox 选中数据
});
const refresh = () => {
getCircuitCtrList('1', '10');
};
//全选事件
const onCheckAllChange = () => {
if (state.checkAll) {
unref(listData).forEach((val: any) => {
ctrlIdList.value.push(val.id);
});
console.log(state.checkedList);
} else {
ctrlIdList.value = [];
state.checkAll = false;
}
};
//弹出框事件
const openTargetModal = () => {
modalVisible.value = true; //出现弹出框
};
watch(
() => state.checkedList,
(val) => {
// console.log(val.length);
state.indeterminate = !!val.length && val.length < plainOptions.value.length;
state.checkAll = val.length === plainOptions.value.length;
},
);
//获取所有的回路分组的列表(回路分组就是控制器分组)
getLoopGroupList().then((res) => {
let code = res.code; //请求状态码
if (code == 200) {
let resData = res.data;
resData.forEach((val) => {
let tempObj = {
value: val.id,
label: val.groupName,
};
options1.value.push(tempObj);
});
}
});
//批量操作控制器事件
const operateClick = () => {
if (ctrlIdList.value[0] != undefined) {
operateId.value = ctrlIdList.value;
console.log(operateId);
modalOperateIsCreate.value = true;
modalOperateVisible.value = true;
} else {
message.error('请先选中控制器列表!');
}
};
//控制器删除事件
const deleteCtrl = () => {
Modal.confirm({
title: () => '系统警告',
icon: () => createVNode(ExclamationCircleOutlined),
content: () => createVNode('div', { style: 'color:red;' }, '是否删除当前选中回路列表?'),
okText: () => '删除',
okType: 'danger',
onOk() {
if (ctrlIdList.value[0] == undefined) {
message.warn('请勾选控制器');
} else {
deleteController(ctrlIdList.value).then((res) => {
console.log(res);
if (res.code === 200) {
let resData = res.data;
resData.forEach((val) => {
if (val.state) {
message.info(val.name + ':' + val.message);
} else {
message.error(val.name + ':' + val.message);
}
});
} else {
message.warn('删除失败');
}
getCircuitCtrList('1', '10');
});
}
},
onCancel() {
console.log('Cancel');
},
});
};
return {
...toRefs(state),
onCheckAllChange,
plainOptions,
prefixCls: 'list-basic',
pagination: {
show: true,
pageSize: 3,
},
value1,
value2,
value3,
options1,
options2,
clickSearch,
listData,
selectClick,
selectClick2,
openTargetModal,
modalVisible,
getCircuitCtrList,
totalPage,
pageChange,
modalAddVisible,
modalOperateVisible,
pageSize,
addClick,
editClick,
watchClick,
ctrlId,
modalIsCreate,
modalAddIsCreate,
modalOperateIsCreate,
modalCompileIsCreate,
modalCompileVisible,
checkListIndex,
changeAlive,
ctrlIdList,
deleteCtrl,
changeAliveModal,
loadingRef,
current,
operateClick,
operateId,
operateUpdateList,
refresh,
};
},
});
</script>
<style lang="less">
@import '/@/design/realtimeMonitor/loopList.less';
</style>
网友评论