使用for await遍历NodeListOf<HTMLImageElement>报错：缺少[Symbol.asyncIterator]()方法

错误原因 #

你用for await...of遍历NodeListOf<HTMLImageElement>时出错，是因为这个DOM元素集合是同步可迭代对象，并不具备异步迭代器要求的[Symbol.asyncIterator]()方法。for await...of只适用于异步迭代场景（比如异步生成器、Promise序列等），而遍历DOM元素列表是完全同步的操作，根本不需要异步遍历语法。

解决方案 #

直接把for await改成普通的for...of即可：

let doc = parser.parseFromString(translation, 'text/html');
let imgs = doc.body.querySelectorAll("img");

// 去掉await，用普通for...of遍历同步集合
for (let img of imgs) {
  const imgBase64 = img.src.split(',')[1];
  const genericImgBase64Name = imgBase64.slice(40, 45) + (Math.round(Math.random() * 100000));
  // 如果后续有异步操作，把await放在循环体内部即可，比如：
  // await fetchSomeData(img.src);
}

补充说明 #

如果循环体内部存在异步操作（比如加载远程资源、发送网络请求），也不需要用for await...of遍历NodeList，只需在异步操作前单独加await。for await...of的正确使用场景是迭代本身返回Promise的异步序列，而非在同步序列中执行异步操作。

内容的提问来源于stack exchange，提问作者Dario Lucić