Vue3前端异步方法调用的执行顺序问题

在下面的节点单击事件方法中调用了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() 函数或其他需要在异步操作结束后执行的代码。