解决先异步调用一个接口,再根据返回值继续循环异步,然后再同步的场景.then的连续调用
场景描述:人员select下拉框为分页只查20个数据下拉(真实数据可能下拉有大几千),但是编辑页进来的id不在这20个数据下拉之内,所以显示的就是id值数组(因为是多选下拉框)
解决:编辑回显方法内写
getUserSecList(data.collaboratorVoList);
然后先调人员20个下拉,调完后,根据传参的编辑id进行循环遍历,判断是不是在这个20个下拉里面,如果不在则给cyList里面追加
坑点,会存在同步异步的大bug,因为先异步调getUserlistInter,然后在这成功回调里面需要先进行人员遍历,不在的在异步调根据id查人员的接口,然后再进行
postForm.collaboratorList = ownerId?.map((item: any) => item.collaborator);
编辑回显,只能用.then().then()进行
第一个.then里面会全部异步执行完了之后再去执行第二个then里面的
const cyList: any = ref([]); let cyListClone: any = []; const getUserSecList = async (ownerId: any) => { getUserlistInter({ pageNo: 1, pageSize: 20, status: 1, primaryFlag: 1 }) .then((res: any) => { if (res.code == 200 || res.code == 0) { if (ownerId && ownerId?.length) { ownerId.forEach(async (item: any) => { let ff: any = res.data.userInfoList.find((v: any) => v.id == item.collaborator); cyList.value = [...res.data.userInfoList]; if (!ff) { getUserInfoById({ id: item.collaborator }).then((userRes: any) => { if (userRes.code == 0) { cyList.value.push({ id: userRes.data.id, nickName: userRes.data.nickName, userName: userRes.data.userName, userCode: userRes.data.userCode || "" }); } }); } }); } } }) .then(() => { postForm.collaboratorList = ownerId?.map((item: any) => item.collaborator); }) .catch((err: any) => { console.log("err", err); }); };