异步函数执行完成后触发后续操作的实现问题求助

我通过step1()构建参数数组发起REST请求，这部分逻辑正常；setAutoComplete()调用getData()递归发起多轮请求（依赖sprLib的getListItems()，本身是Promise），数据获取流程也能正常完成。但现在无法让nextStep()在整个异步序列结束后执行，尝试把step1()包装成Promise、改成async都没效果，cheatStep()是异步完成的触发点，但step1()无法感知它的完成状态。

原代码 #

var dict = [{
  'id': '1',
  'title': 'test1'
}, {
  'id': '2',
  'title': 'test2'
}, {
  'id': '3',
  'title': 'test3'
}, {
  'id': '4',
  'title': 'test4'
}, ]

step1()
nextStep()

function nextStep() {
  console.log('I run after Step1')
}

function cheatStep() {
  console.log('I cheated')
}

function step1() {
setAutoComplete(4);
}

function setAutoComplete(listIndex) {
  getData(listIndex,
    function(result) {
      for (var i = 0; i < listIndex; i++) {
        var autoDict = result[i];
        console.log(autoDict)
      }
      cheatStep()
    },
    function(e) {
      console.error(e);
      alert('An error occurred wile setting autocomplete data for item');
    })
    
}

async function getData(listIndex, success, error, curIndex, result) {
  var curIndex = curIndex || 0;
  var result = result || {};
  await getListItems(curIndex,
    function(listItems) {
      result[curIndex] = listItems;
      curIndex++;

      if (listIndex > curIndex) {
        getData(listIndex, success, error, curIndex, result);
        console.log('1');
      } else {
        console.log('2');
        success(result);
      }
    },
    error)
}

function getListItems(curIndex, success, error) {
  new Promise(
      function(resolve, reject) {
        var x = dict[curIndex];
        resolve(x);
      })
    .then(function(x) {
      success(x);
    });
}

问题根源 #

1. getListItems()未返回Promise，导致await无效（await必须等待Promise对象）
2. getData()的递归调用未被await，异步流程无法被正确追踪
3. step1()和setAutoComplete()未返回Promise，外部无法等待整个异步序列完成

修复后的代码 #

var dict = [{
  'id': '1',
  'title': 'test1'
}, {
  'id': '2',
  'title': 'test2'
}, {
  'id': '3',
  'title': 'test3'
}, {
  'id': '4',
  'title': 'test4'
}]

// 用自执行async函数实现顺序执行
(async function() {
  await step1();
  nextStep();
})();

function nextStep() {
  console.log('I run after Step1')
}

function cheatStep() {
  console.log('I cheated')
}

// 让step1返回Promise，供外部等待
function step1() {
  return setAutoComplete(4);
}

// 重构setAutoComplete为Promise风格
function setAutoComplete(listIndex) {
  return new Promise((resolve, reject) => {
    getData(listIndex)
      .then(result => {
        for (let i = 0; i < listIndex; i++) {
          const autoDict = result[i];
          console.log(autoDict)
        }
        cheatStep();
        resolve(result);
      })
      .catch(e => {
        console.error(e);
        alert('An error occurred while setting autocomplete data for item');
        reject(e);
      });
  });
}

// 重构getData为纯async/await风格，移除回调参数
async function getData(listIndex, curIndex = 0, result = {}) {
  // 等待getListItems的Promise结果
  const listItems = await getListItems(curIndex);
  result[curIndex] = listItems;
  curIndex++;

  if (listIndex > curIndex) {
    console.log('1');
    // 递归时必须await，保证异步顺序
    return getData(listIndex, curIndex, result);
  } else {
    console.log('2');
    return result;
  }
}

// 让getListItems返回Promise，不再依赖回调
function getListItems(curIndex) {
  return new Promise((resolve, reject) => {
    const x = dict[curIndex];
    resolve(x);
  });
}

关键修复说明 #

• 统一异步流程：将所有回调风格的函数改为Promise+async/await模式，避免回调嵌套和流程混乱
• 保证await有效性：让getListItems()返回Promise，确保await能正确等待异步操作完成
• 递归追踪：getData()递归时使用await，保证每一轮请求完成后再执行下一轮
• 暴露异步状态：step1()和setAutoComplete()返回Promise，外部可以通过await等待整个序列结束
• 入口顺序控制：用自执行async函数包裹入口代码，实现step1()完成后再调用nextStep()

内容的提问来源于stack exchange，提问作者Eric Smith