Javascript 按顺序在循环中加载带有promise的图像

有人能帮我按此顺序从youtube加载promise图像吗

如果

maxresdefault

不存在，请转到数组中的下一个图像（

hqdefault

）e.t.c

如果图像已加载->退出，不加载其他图像

谢谢各位:

---

以下是：

让noImageUrl=''；
常量分辨率=['maxresdefault'，'hqdefault'，'mqdefault'，'sddefault']；
设videoId='dQw4w9WgXcQ'；
决议。forEach（项目=>{
让url为空https://i.ytimg.com/vi/“+videoId+”/“+item+”.jpg”；
加载图像（url）
。然后（（img）=>{
console.log（'img'，img）；
document.body.append（img）
})
.catch（error=>console.error（'error'，error））；
});
函数loadImage（url）{
返回新承诺（（解决、拒绝）=>{
const img=新图像（）；
img.addEventListener（'load'，e=>{
自然宽度{
拒绝（新错误（`Failed to load image's URL:${URL}`））；
});
img.src=url；
});
}

您可以使用

.catch（）

方法将多个承诺链接在一起作为回退机制

这段代码应该做到以下几点：

让noImageUrl=''；
//这将按预期工作
设defaultResolution='maxresdefault'；
让fallbackResolutions=['hqdefault'，'mqdefault'，'sddefault']；
//取消注释以模拟回退
//defaultResolution='我不存在'；
//fallbackResolutions=[“我也不存在”，“mqdefault”，“sddefault”]；
设videoId='dQw4w9WgXcQ'；
设p=loadImage（视频ID，默认分辨率）；
fallbackResolutions.forEach（分辨率=>{
p=p.catch（err=>loadImage（videoId，分辨率））
});
p、 然后（（img）=>{console.log（'img'，img）；document.body.append（img）}）
.catch（error=>console.error（'error'，error））；
函数loadImage（视频ID，分辨率）{
让url为空https://i.ytimg.com/vi/“+videoId+”/“+resolution+”.jpg'；
返回新承诺（（解决、拒绝）=>{
const img=新图像（）；
img.addEventListener（'load'，e=>{
自然宽度{
拒绝（新错误（`Failed to load image's URL:${URL}`））；
});
img.src=url；
});
}