为何用async/await后Promise仍返回undefined？变量传值差异解惑

核心问题出在变量赋值时机与resolve执行时机的先后顺序上：

当你将赋值为materias[mat]的变量mater传给resolve时，resolve执行的时间早于mater被正确赋值的时间，此时mater还处于未定义或undefined状态，导致Promise最终返回undefined；而直接传入materias[mat]时，是在resolve执行的当下立即计算并传入对应数组元素，此时下标mat是有效的，所以能返回正确结果。

举个具体的错误代码示例（模拟常见的异步赋值场景）：

const materias = [{id: 1, name: "代数"}, {id: 2, name: "物理"}];

async function encontrarMateria(mat) {
  return new Promise((resolve) => {
    let mater;
    // 模拟异步赋值操作（比如调用API、定时器等）
    setTimeout(() => {
      mater = materias[mat];
    }, 0);
    // 这里resolve先执行，mater还没被赋值，是undefined
    resolve(mater);
  });
}

// 调用后会输出undefined
(async () => {
  console.log(await encontrarMateria(0));
})();

如果改成直接传入materias[mat]，就能正常返回：

async function encontrarMateria(mat) {
  return new Promise((resolve) => {
    // 立即获取当下mat对应的元素并传入resolve
    resolve(materias[mat]);
  });
}

如果必须通过变量mater传递，要确保赋值完成后再调用resolve：

async function encontrarMateria(mat) {
  return new Promise((resolve) => {
    setTimeout(() => {
      const mater = materias[mat];
      // 赋值完成后再执行resolve
      resolve(mater);
    }, 0);
  });
}

补充说明：async/await只是用来简化Promise的异步流程处理，它不会改变Promise内部代码的执行顺序，所以即使加了async/await，只要内部resolve的时机不对，依然会出现返回undefined的问题。

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