哪些场景下使用await/async更好？哪些场景下使用then更好？

Question

哪些场景下使用await/async更好？哪些场景下使用then更好？

我的认为await/async的出现是为了改善then的使用，当比较复杂的时候，await/async会起到作用，当问题比较简单的时候用then。但是我们还是应该选择其中一种，这样代码风格比较统一。

例如我下面这个需求使用的await/async不知道是否合适（是不是变得麻烦了？）
工作1：获得选择列表，并默认选择全部。
工作2：根据选择的单位和其他信息向服务端发送请求，获取数据之后根据数据刷新页面

当初始加载该页面的时候，整合工作1和工作2。

async function getDwSelections() {
  try {
    const result = await getDwList();
    if (!result.isSucceed) throw new Error("获取单位列表失败，错误信息：' + result.errMsg")
    const data = result.data[0].datas
    console.log("dw selections: ", data);
    dwSelections.value.push({
      value: "全部",
      label: "全部"
    })
    for (const item of data) {
      dwSelections.value.push({
        value: item.dwdm,
        label: item.dwmc
      })
    }
    selectedDw.value = "全部";
  } catch (error) {
    const errorMessage = error instanceof Error ? error.message : error;
    throw new Error(errorMessage);
  }
}

async function query() {
  try {
    const result = await getTableData({dwdm: selectedDw.value === "全部" ? '' : selectedDw.value, ny: selectedDate.value})
    if (!result.isSucceed) throw new Error("获取数据失败，错误信息：" + result.errMsg)
    rqToDm.value = {};
    const data = result.data[0].datas;
    const newTableData = new Map();
    const newDateFields = new Set();
    const currentDate = common.getCurrentDate("yyyy-MM-dd");
    for (const entry of data) {
     if(entry.rqdm > currentDate) continue;
      if (newTableData.has(entry.jlid)) {
        newTableData.get(entry.jlid)[entry.rq] = entry.rjql;
      } else {
        newTableData.set(entry.jlid, {
          jlid: entry.jlid,
          ny: selectedDate.value,
          dwmc: entry.dwmc,
          jqd: entry.jqd,
          dlgs: entry.dlgs,
          jqfs: entry.jqfs,
          ljjql: entry.ljjql,
          rpjql: entry.rpjql,
          ljdsl: entry.ljdsl,
          [entry.rq]: entry.rjql
        })
      }
      newDateFields.add(entry.rq)
      rqToDm.value[entry.rq] = entry.rqdm;
    }
    dateFields.value = Array.from(newDateFields).map(e => {
      return {"label": e, "prop": e};
    });
    tableData.value = Array.from(newTableData.values());

  } catch (error) {
    const errorMessage = error instanceof Error ? error.message : error;
    throw new Error(errorMessage);
  }
}

onMounted(async () => {
  loading.value = true;
  try {
    await getDwSelections();
    await query()
  } catch (error) {
    ElMessage.error(error.message);
  }
  loading.value = false;
})

附：代码中有什么其他问题也欢迎指正。

Answer 1

1. 顺序执行，后面的环节依赖前面的结果，用 await
2. 支线执行，不影响主线，用 .then，比如数据埋点
3. 需要跨文件等待执行结束，return new Promise