在下面的节点单击事件方法中调用了getSheetNum()这个方法,由于这个方法每触发一次就向后台传参查询一次,所以每次执行顺序
/** 节点单击事件 */
function handleNodeClick(data) {
let cascadeIds = data.cascadeIds.split("-");
sheetNumbers.value = null;
queryParams.value.domainName= null;
queryParams.value.subMod = null;
if(cascadeIds[0]){
console.log("一级")
queryParams.value.domainName =cascadeIds[0];
}
if(cascadeIds[1]){
// 二级
console.log("二级")
getSheetNum(cascadeIds[1]).then(response => {
sheetNumbers.value = [];
response.data.forEach((n) => sheetNumbers.value.push(n));
});
console.log("2optionSheetNumbers.value = " + optionSheetNumbers.value);
console.log("2optionSheetNumbers.value = " + optionSheetNumbers.value);
}
if(cascadeIds[2]){
// 三级
console.log("三级")
queryParams.value.subMod = cascadeIds[2];
sheetNumbers.value = cascadeIds[1]
console.log("3optionSheetNumbers.value = " + optionSheetNumbers.value);
console.log("3optionSheetNumbers.value = " + optionSheetNumbers.value);
}
getList();
};
/** 查询页码展示框所有页码*/
function getSheetNum(sheetNumber) {
return getSheetNumbers(sheetNumber).then(response => {
optionSheetNumbers.value = [];
response.data.forEach((n) => optionSheetNumbers.value.push(n));
return response; // 返回 response
});
}
如果需要让 getSheetNum()
函数在 handleNodeClick()
方法内先于后续代码调用,那么可以使用 async/await
或 Promise 链式调用的方式来解决这个问题。
首先,修改 handleNodeClick()
方法为一个异步函数,在需要等待异步操作结束的地方添加 await
关键字。同时,将 getSheetNum()
方法的返回值声明为一个变量并添加 await
关键字,以确保获取到异步方法的返回结果后再执行下一步操作。
以下是使用 async/await
的示例代码:
async function handleNodeClick(data) {
let cascadeIds = data.cascadeIds.split("-");
sheetNumbers.value = null;
queryParams.value.domainName = null;
queryParams.value.subMod = null;
if (cascadeIds[0]) {
console.log("一级")
queryParams.value.domainName = cascadeIds[0];
}
if (cascadeIds[1]) {
// 二级
console.log("二级")
const response = await getSheetNum(cascadeIds[1]);
sheetNumbers.value = [];
response.data.forEach((n) => sheetNumbers.value.push(n));
console.log("2optionSheetNumbers.value = " + optionSheetNumbers.value);
console.log("2optionSheetNumbers.value = " + optionSheetNumbers.value);
}
if (cascadeIds[2]) {
// 三级
console.log("三级")
queryParams.value.subMod = cascadeIds[2];
sheetNumbers.value = cascadeIds[1]
console.log("3optionSheetNumbers.value = " + optionSheetNumbers.value);
console.log("3optionSheetNumbers.value = " + optionSheetNumbers.value);
}
getList();
};
如果你不想使用 async/await
,可以使用 Promise 的链式调用方式,将后续代码全部写在一个 .then()
回调中,并在第一个 .then()
回调中获取到异步方法的返回结果。
以下是使用 Promise 链式调用的示例代码:
function handleNodeClick(data) {
let cascadeIds = data.cascadeIds.split("-");
sheetNumbers.value = null;
queryParams.value.domainName = null;
queryParams.value.subMod = null;
if (cascadeIds[0]) {
console.log("一级")
queryParams.value.domainName = cascadeIds[0];
}
if (cascadeIds[1]) {
// 二级
console.log("二级")
getSheetNum(cascadeIds[1])
.then(response => {
sheetNumbers.value = [];
response.data.forEach((n) => sheetNumbers.value.push(n));
console.log("2optionSheetNumbers.value = " + optionSheetNumbers.value);
console.log("2optionSheetNumbers.value = " + optionSheetNumbers.value);
return response;
})
.then(response => {
// 后续代码全部写在这里
if (cascadeIds[2]) {
// 三级
console.log("三级")
queryParams.value.subMod = cascadeIds[2];
sheetNumbers.value = cascadeIds[1]
console.log("3optionSheetNumbers.value = " + optionSheetNumbers.value);
console.log("3optionSheetNumbers.value = " + optionSheetNumbers.value);
}
getList();
});
} else {
// 不需要调用 getSheetNum() 的情况
getList();
}
}
注意,在使用 Promise 链式调用的情况下,需要在最后一个 .then()
回调中执行 getList()
函数或其他需要在异步操作结束后执行的代码。