Загрузка изображений с обещанием в цикле в порядке

Question

Может ли кто-нибудь помочь мне загрузить изображения с обещанием с YouTube в следующем порядке:

1. Если maxresdefault не существует, перейти к следующему изображению в массиве (hqdefault) e.t.c.
2. Если изображение загружено -> выйти и не загружать другие изображения.

Спасибо:

---

Вот пример codepen :

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;
  });
}

Answer 1

Вы можете объединить несколько обещаний вместе в качестве запасного механизма с помощью метода .catch().

Этот код должен помочь: 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;
    });
}