如何按顺序使用Promise？新手求助将代码转换为顺序Promise

嘿，作为编程新手，刚接触Promise确实容易懵！我来帮你把代码改成顺序执行的Promise，保证一步步讲清楚~

首先我们先写一个简单的函数，拿到所有被选中的复选框的值：

function getCheckedValues() {
  // 选中所有被勾选的复选框
  const checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');
  // 把NodeList转成数组，再提取每个复选框的value
  return Array.from(checkedBoxes).map(box => box.value);
}

假设你原来的代码里有几个需要按顺序执行的异步操作（比如调用API、处理数据等），我们要把每个操作都包装成返回Promise的函数。举个例子：

// 模拟第一个异步操作（比如提交选中值到后端）
function firstAsyncOperation(values) {
  return new Promise((resolve, reject) => {
    // 这里替换成你实际的异步逻辑，比如fetch请求
    setTimeout(() => {
      console.log("第一步操作完成：已提交选中值", values);
      resolve(values); // 把结果传递给下一个步骤
    }, 1000);
  });
}

// 模拟第二个异步操作（比如根据返回结果做后续处理）
function secondAsyncOperation(processedValues) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const finalData = processedValues.map(val => `已处理：${val}`);
      console.log("第二步操作完成：处理后的数据", finalData);
      resolve(finalData);
    }, 1000);
  });
}

写法一：用.then()链（传统Promise写法） #

这种写法通过链式调用，让每个步骤等待前一个完成后再执行：

// 先获取选中值，再按顺序执行异步操作
getCheckedValues()
  .then(checkedValues => firstAsyncOperation(checkedValues))
  .then(resultFromFirst => secondAsyncOperation(resultFromFirst))
  .catch(error => {
    // 捕获任何步骤的错误
    console.error("执行过程出错：", error);
  });

写法二：用async/await（更直观，适合新手） #

这种写法用同步代码的风格写异步逻辑，可读性更强：

async function runAllSteps() {
  try {
    // 第一步：获取选中值
    const checkedValues = getCheckedValues();
    console.log("已获取复选框选中值：", checkedValues);

    // 第二步：等待第一个异步操作完成
    const firstResult = await firstAsyncOperation(checkedValues);

    // 第三步：等待第二个异步操作完成（必须等第一步结束）
    const finalResult = await secondAsyncOperation(firstResult);

    console.log("所有步骤执行完毕，最终结果：", finalResult);
  } catch (error) {
    // 捕获整个流程中的错误
    console.error("执行出错：", error);
  }
}

// 调用这个函数启动流程
runAllSteps();

只要把你实际的业务逻辑替换掉例子里的setTimeout部分，就能实现顺序执行的Promise啦！如果你的操作更多，只需要继续在链里加.then()或者加更多await语句就行~

内容的提问来源于stack exchange，提问作者carlo suarez