按顺序循环加载带有 Promise 的图像答案

【问题标题】：Loading images with promise in a loop in order按顺序循环加载带有 Promise 的图像
【发布时间】：2019-06-11 08:25:13
【问题描述】：

有人可以帮我按这个顺序从 youtube 加载带有承诺的图片吗？：

如果maxresdefault 不存在，则转到数组中的下一个图像 (hqdefault) 等
如果图像已加载 -> 退出并且不加载其他图像。

谢谢：

这里是codepen example：

let noImageUrl = '';
const resolutions = ['maxresdefault', 'hqdefault', 'mqdefault', 'sddefault'];
let videoId = 'dQw4w9WgXcQ';

resolutions.forEach(item => {
  let url = 'https://i.ytimg.com/vi/' + videoId + '/' + item + '.jpg';
  loadImage(url)
    .then((img) => {
      console.log('img ', img);
      document.body.append(img)
    })
    .catch(error => console.error('error ', error));
});

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', e => {
      img.naturalWidth <= 240 ? reject(new Error('No image found')) : resolve(img);
    });
    img.addEventListener('error', () => {
      reject(new Error(`Failed to load image's URL: ${url}`));
    });
    img.src = url;
  });
}

【问题讨论】：

标签： javascript image loops promise youtube

【解决方案1】：

您可以使用 .catch() 方法将多个 Promise 链接在一起作为后备机制。

这段代码应该可以解决问题： https://codepen.io/anon/pen/rogRKR

let noImageUrl = '';

// this will work as intended
let defaultResolution = 'maxresdefault';
let fallbackResolutions = ['hqdefault', 'mqdefault', 'sddefault'];

// uncomment to simulate a fallback
// defaultResolution = 'i dont exist';
// fallbackResolutions = ['i dont exist either', 'mqdefault', 'sddefault'];

let videoId = 'dQw4w9WgXcQ';

let p = loadImage(videoId, defaultResolution);
fallbackResolutions.forEach(resolution => {
    p = p.catch(err => loadImage(videoId, resolution))
});

p.then((img) => {console.log('img ', img); document.body.append(img)})
    .catch(error => console.error('error ', error));

function loadImage(videoId, resolution){
    let url = 'https://i.ytimg.com/vi/'+videoId+'/'+resolution+'.jpg';
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.addEventListener('load', e => {
            img.naturalWidth <= 240 ? reject(new Error('No image found')) : resolve(img);
        });
        img.addEventListener('error', () => {
            reject(new Error(`Failed to load image's URL: ${url}`));
        });
        img.src = url;
    });
}

【讨论】：