数组求和延迟3秒输出：修复Promise代码及async-await实现方案

我来帮你排查代码里的问题，一步步解决～

先看原代码的问题 #

你的代码里有两个关键错误：

1. 参数拼写错误：Promise构造函数的第一个参数你写成了myRsolve，但后面调用的是myResolve，大小写拼写不一致，导致找不到这个函数，Promise永远无法进入resolved状态。
2. then方法调用位置错误：你把prom.then()写在了Promise构造函数的内部，这时候prom变量还没完成初始化，会直接抛出Cannot read property 'then' of undefined的错误，必须把then调用移到Promise实例创建完成之后。

修复后的Promise版本代码 #

var array = [4, 2, 7, 1];
// 创建Promise实例，修正参数拼写
var prom = new Promise(function(myResolve, myReject) {
  var sum = array.reduce((x, y) => x + y);
  setTimeout(function() {
    myResolve(sum); // 现在拼写正确了
  }, 3000);
});
// 把then移到Promise实例外面，确保prom已经被正确赋值
prom.then(function(value) {
  document.getElementById("tot").innerHTML = value;
});

用async-await实现的版本 #

async-await是Promise的语法糖，写起来更像同步代码，可读性更高。我们可以先封装一个返回Promise的函数，再用async函数来等待结果：

var array = [4, 2, 7, 1];

// 封装异步计算函数，返回Promise
function calculateSumWithDelay() {
  return new Promise((resolve) => {
    const sum = array.reduce((x, y) => x + y);
    setTimeout(() => {
      resolve(sum);
    }, 3000);
  });
}

// 使用async-await处理异步逻辑
async function displayTotalSum() {
  try {
    // 等待Promise返回结果
    const total = await calculateSumWithDelay();
    // 更新DOM
    document.getElementById("tot").innerHTML = total;
  } catch (err) {
    // 捕获可能的错误（比如Promise被reject的情况）
    console.error("计算出错：", err);
  }
}

// 调用函数触发执行
displayTotalSum();

这个版本里，await会暂停displayTotalSum函数的执行，直到calculateSumWithDelay返回的Promise完成，然后再继续执行更新DOM的代码，逻辑更清晰。

内容的提问来源于stack exchange，提问作者סוהא מסארווה