Как получить значение base64 url снаружи функции onloadend?

Question

[bugagashnik]

Есть массив объектов blob responseArray. Нужно получить base64 url с каждого blob и записать в массив finalScreenshotsArray

let finalScreenshotsArray = []
    
          responseArray.map(blob=> {
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function() {
              let base64data = reader.result;
              finalScreenshotsArray.push(base64data)
    
    
            }
          })

Однако внутри функции работает только console.log(base64data), но в массив не пишется. Как получить доступ к этой переменной снаружи?

Answer 1

[Роман]

У вас вызов reader.onloadend = function() {...} является асинхронным. Поэтому, в момент вызова console.log() вне responseArray.map(blob=> {...}) массив finalScreenshotsArray все еще пуст.

попробуйте сделать так (пример очень грубый, но для идентификации проблемы вполне годен):

let finalScreenshotsArray = [];

responseArray.forEach(blob=> {
  let reader = new FileReader();
  reader.readAsDataURL(blob);
  let promise = new Promise((resolve, reject) => {
    reader.onloadend = function() {
      resolve(reader.result);
    }
  });
  finalScreenshotsArray.push(promise);
});

Promise.all(finalScreenshotsArray)
.then(results => {
  console.log(results);
});

ЗЫ: код не проверял, на телефоне это достаточно проблематично.

Comments

[bugagashnik]

посмотрю завтра на работе, спасибо

[bugagashnik]

работает, спасибо! На ангуляре первый проект мой, нужно походу изучить rxjs поглубже. Правильно понимаю, что здесь нужно использовать Observable по хорошему?

[Роман]

bugagashnik, если честно, то не знаю, никогда не работал с RxJS )

Answer 2

[Денис Грибанов]

Абстрагируясь от ньансов, можно сказать, что всё должно работать, т.к. finalScreenshotsArray достается из замыкания (вверх по скоупам). Пример на любом sandbox поможет решению проблемы.

Comments

[bugagashnik]

внутри функции консолится юрл стринг, однако когда пушу и консолю снаружи функции, консолит пустой массив

[Денис Грибанов]

А можно конкретный пример кода где Вы консолите?

[bugagashnik]

Денис Грибанов, там же где и пушу в массив