异步JS用Promise设置img的src时404不触发onerror问题求助

问题根因 #

你的loadImg函数中事件绑定逻辑存在错误：img.onload = myResolve(img)、img.onerror = myReject(img)这两行是立即执行了myResolve/myReject方法，直接把Promise的状态敲定了，而不是将这两个方法作为回调函数，等待图片加载/加载失败事件触发时再执行。
代码运行时不等图片请求返回结果，就已经将Promise标记为成功状态，所以哪怕后续请求返回404，也只会走then分支添加loaded类，和实际加载结果完全脱节。
另外还有一个容易忽略的细节：要先绑定事件回调，再给img.src赋值，避免部分浏览器缓存场景下，图片加载完成的瞬间事件还没绑定，导致回调漏触发。

修正后的代码 #

仅需要修改loadImg函数即可：

const loadImg = function (img, url) {
    return new Promise((myResolve, myReject) => {
      // 先绑定事件回调
      img.onload = () => myResolve(img);
      img.onerror = () => myReject(img);
      // 再赋值src触发加载
      img.src = url;
    });
};

其余业务逻辑不需要修改，修正后即可正常根据图片加载结果添加对应类名。

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