Как правильно воспользоваться async await?

Question

[Юра Комаров]

Всем доброго вечера. Пытаюсь разобраться с async awit.
Я хочу получить массив объектов содержащий вид

[
    {
        image: 'base64...'
    },
    {
        image: 'base64...'
    }
]

и он должен формироваться по клику.
Я тут написал пример того, как это должно работать. Вот только не пойму, как сюда добавить async await

const arr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];
const arrImg = [];

const getImg = url => {
    return fetch(url)
        .then(response => {
            return response.blob();
        })
        .then(blob => {
            const reader = new FileReader();
            reader.addEventListener('loadend', function() {
                arrImg.push({image: reader.reuslt});
            });
            reader.readAsDataURL(blob);
        });
};

document.querySelector('button').addEventListener('click', () => {
    arr.forEach(item => {
        getImg(`./images/${item}`);
    });
    console.log(arrImg);
});

Думаю здесь простое решение, вот только не могу додуматься какое.

Answer 1

[0xD34F]

const getImg = url => fetch(url)
  .then(r => r.blob())
  .then(blob => new Promise(resolve => {
    const reader = new FileReader();
    reader.addEventListener('loadend', () => resolve({ image: reader.result }));
    reader.readAsDataURL(blob);
  }));


document.querySelector('button').addEventListener('click', async () => {
  const arrImg = await Promise.all(arr.map(n => getImg(`./images/${n}`)));
  console.log(arrImg);
});

Answer 2

[profesor08]

const arr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];

const getImg = async (url) => {
  const response = await fetch(url); 
  const blob = await response.blob();
  const reader = new FileReader();

  return new Promise(resolve => {
    reader.addEventListener('loadend', function() {
      resolve({image: reader.result});
    });
    reader.readAsDataURL(blob);
  });
}

document.querySelector('button').addEventListener('click', async () => {
    
    const arrImg = await Promise.all(arr.map(
      url => getImg(url)
    ));

    console.log(arrImg);
});

Comments

[Юра Комаров]

Спасибо за решение, я рад что вы решили мне помочь.
Я запустил ваш код и в консоле получил.

0: {image: undefined}
1: {image: undefined}
2: {image: undefined}
3: {image: undefined}
4: {image: undefined}

Это наверное потому, что здесь не то возвращается. Если в первом решении возвращали return fetch то все работало, то здесь нет. Может я не все еще до конца понял в этой технологии, но первое решение работает.
Еще раз спасибо что уделили мне время.

[profesor08]

Юра Комаров, дело в опечатке - reader.reuslt
если где-то прилетает undefined, всегда смотри какой это параметр и проверяй его правильность написания

[Юра Комаров]

И правда ) , теперь все работает. Спасибо )
Но тут еще пока что играет роль, что вообще не понятно, что вся эта конструкция должна возвращать, опыт работы с этой технологией всего вечер. Учту на будущее

[profesor08]

Юра Комаров, async функция возвращает промис. await ждет пока промис вернет значение.