如何修复这段JavaScript异步代码中的Pending Promise问题？

问题描述 #

以下代码功能符合预期，能按顺序每隔1秒将数组元素输出到控制台和文本框中：

JS代码 #

var a = [1,2,3,4,5,6,7];
async function showArray(arr){
  for (var i = 0; i<arr.length; i++) {
    await showElement(arr[i]);
  }
}
async function showElement(x){
  console.log(x);
  document.getElementById('result').value+=x.toString();
  return new Promise((resolve) => {
    setTimeout(function () {
      resolve("");
    }, 1000);
  });
}
(async()=>{ await showArray(a)})();

HTML代码 #

<textarea id="result"></textarea>

但直接将这段代码输入控制台时，控制台会显示Promise <pending>的提示，询问该提示是否需要修复，以及如何修复。

问题分析与修复方案 #

原因说明 #

你使用的立即执行异步函数表达式（IIFE）本身会返回一个Promise，控制台默认会打印这个返回值。由于showArray是async函数但没有明确返回值，默认返回resolve为undefined的Promise——控制台显示的Promise <pending>只是执行初期的状态，等所有异步操作完成后，这个Promise其实已经resolved了，不会影响代码功能。

是否需要修复 #

如果只是控制台的这个提示，不影响代码正常运行，完全不需要修复。但如果想消除这个提示，或者让代码更规范，可以用以下两种方法：

方法一：让showArray返回明确的Promise

async函数如果没有return语句，默认返回resolve为undefined的Promise，我们可以显式添加return让逻辑更清晰，也能避免控制台的pending提示：

async function showArray(arr){
  for (var i = 0; i<arr.length; i++) {
    await showElement(arr[i]);
  }
  return; // 显式返回，等价于return Promise.resolve()
}

方法二：处理IIFE的返回Promise

可以用void运算符忽略IIFE的返回值，或者添加catch捕获潜在错误（更规范）：

• 用void消除返回值打印：

void (async()=>{ await showArray(a)})();

• 添加catch处理（推荐，避免未捕获的Promise错误）：

(async()=>{ await showArray(a)})().catch(err => console.error('出错了：', err));

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