如何将JS回调函数改写为Promise并关联report.execute调用？

我刚接触JS Promise，想把大量回调函数改成Promise实现。看示例好像简单，但实际改的时候遇到了问题。下面是原回调风格的getData函数、report.execute里的调用示例，还有我自己的初步尝试，请教怎么完整改写并适配report.execute的调用。

原回调风格代码 #

1. getData函数 #

getData = function (id, key, required, callback) {
  // do a lot of things
  let lParams = {
    tParams: { start: 0, Query: numQueries },
    callback: () =>  {
      if (!required)
        showGrid(id);
      if (callback)
        callback();
    }
  };
  //do some work...
  e = some condition
  if(e)
    e.load(tParams);
  else { 
    e.read(new data.Operation(tParams), tParams.callback);
  }
}

2. report.execute调用示例 #

report.execute = function (params) {
      // Do a lot of things...
      showMessage("Working on data ...");
      getData(curFormID, data.key, false
        , function () {
          workStat = 1;
          ppl.pageReady();
        });
    }
  });
};

我的初步尝试 #

getData = async (isoForm, nKey, onlyGet) => {
  
  let promise = new Promise((resolve, reject) => {
     // do the things that are in the getData function above???
  })
}

完整改写方案 #

1. 改写getData为Promise版本 #

核心思路是把原回调触发逻辑替换成Promise的resolve调用，同时完整保留原有业务逻辑：

getData = function (id, key, required) {
  return new Promise((resolve, reject) => {
    // 保留原业务逻辑
    let lParams = {
      tParams: { start: 0, Query: numQueries },
      callback: () =>  {
        if (!required)
          showGrid(id);
        // 原回调触发时，调用resolve标记Promise完成
        resolve();
      }
    };
    //do some work...
    const e = some condition; // 建议用const/let声明变量，避免全局污染
    if (e) {
      e.load(lParams.tParams); // 注意变量名对应，原代码tParams是lParams的属性
    } else { 
      e.read(new data.Operation(lParams.tParams), lParams.callback);
    }

    // 补充：如果异步操作有错误场景，需在错误回调中调用reject
    // 比如e.load或e.read支持错误回调的话：
    // e.load(lParams.tParams, (error) => { if(error) reject(error); })
  });
}

2. 修改report.execute的调用 #

getData现在返回Promise，有两种调用方式可选：

方式一：链式调用.then()

report.execute = function (params) {
  // Do a lot of things...
  showMessage("Working on data ...");
  getData(curFormID, data.key, false)
    .then(() => {
      workStat = 1;
      ppl.pageReady();
    })
    .catch(error => {
      // 处理Promise失败场景
      console.error('数据获取失败:', error);
    });
};

方式二：async/await语法（更直观）

report.execute = async function (params) {
  // Do a lot of things...
  showMessage("Working on data ...");
  try {
    await getData(curFormID, data.key, false);
    workStat = 1;
    ppl.pageReady();
  } catch (error) {
    console.error('数据获取失败:', error);
  }
};

关键注意点 #

• 原getData的第四个callback参数被移除，Promise通过resolve传递完成信号
• 完全保留原业务中的showGrid(id)调用，确保功能不受影响
• 如果原异步操作（e.load/e.read）存在错误分支，一定要在错误回调中调用reject(error)，这样才能在调用端捕获错误
• 原代码中e = some condition建议用const/let声明，避免全局变量污染

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