Promises и Observables для загрузки нескольких файлов с использованием шаблона async-await - Ionic 3, Firebase

Я использую async / await в цикле for, чтобы дождаться метода get, внутри которого есть наблюдаемое. Поэтому я заключаю его в обещание, которое разрешается, когда наблюдаемые данные приема, а затем он отписывается с помощью оператора take (1) ..

async addImgStorage(postId, base64data) {
    let urls = [];
    for (let i = 0; i < base64data.length; i++) {
      const file = "data:image/jpg;base64," + base64data;
      const filePath = "img/" + postId + "_" + i;
      let url = await this.getUrl(filePath, file);
      urls.push(url);
    }
    this.addImagen(postId, urls);
  }

 getUrl(filePath, file) {
    return new Promise((resolve, reject) => {
      const ref = this.storage.ref(filePath);
      ref.putString(file, "data_url").then(() => {
        const downloadURL = ref
          .getDownloadURL()
          .pipe(take(1))
          .subscribe(url => {
            if (url) {
              resolve(url);
              console.info("url from get", url);
            }
          });
      });
    });
  }

 addImagen(postId, urls) {
    const imagen: Imagen = {
      postId: postId,
      img: { ...urls }
    };
    this.afDB.list("imagenes").push(imagen);
  }

приведенный выше код отлично работает, если длина base64data равна 1, но выдает следующую ошибку, когда его длина> 1

ERROR Error: Uncaught (in promise): [object Object]

Решено: я просто забыл добавить индекс в base64data при назначении константы файла ... поэтому я передавал весь массив в запросе ...

poimsm2 26.08.2018 08:40

альтернатива, если вы хотите использовать другой подход. stackoverflow.com/questions/28983424/…

Yushin 26.08.2018 15:07
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
2
427
0

Другие вопросы по теме