Множественные функциональные события / обратные вызовы?

Я пытаюсь создать функцию, которая передает события из функции загрузки Firebase, а затем показывает прогресс в моем пользовательском интерфейсе.

У меня есть функция, которая обрабатывает загрузку изображения следующим образом:

import firebase from '~/firebase';
import hashSum from 'hash-sum';
import events from 'events'

async function uploadFile(image, design) {
  const eventEmitter = new events.EventEmitter();
    const hashId = hashSum(image.name + Date.now())
    const meta = {
      customMetadata: {
        namne: image.name
      }
    }
    const storageRef = firebase.storage().ref().child(`designs/${firebase.auth().currentUser.uid}/${design.id}/${hashId}.png`);
    const task = storageRef.put(image, meta);
    task.on('state_changed',
      (snapshot) => {
        const percentage = snapshot.bytesTransferred / snapshot.totalBytes * 100;
        eventEmitter.emit('progress', percentage)
        console.info(percentage)
      },
      (err) => {
        eventEmitter.emit('error', err)
      },
      () => {
        task.snapshot.ref.getDownloadURL().then(url => {
          eventEmitter.emit('done', {url, hashId})
        })
      }
    )
}



export { uploadFile }

А затем в своем пользовательском интерфейсе я хочу получать эти события и что-то с ними делать:

const upload = await uploadFile(selectedFile, {id: this.props.match.params.id})
upload.on('done', async (data) => {
  files.push({id: data.hashId ,name: selectedFile.name, url: data.url})
  await firebase.firestore().collection('designs').doc(firebase.auth().currentUser.uid).collection('designs').doc(this.props.match.params.id).update({
    files
  })
})
upload.on('error', (err) => {
  message.error(err)
})
upload.on('progress', (percent) => {
  this.setState({
    uploadProgress: percent
  })
})

Теперь ясно, что я делаю что-то не так, поскольку upload.on не является функцией. Может ли кто-нибудь посоветовать, как с этим справиться, или есть более простой способ вернуть уже существующее событие?

похоже, вы получаете обратно Promise и используете async, разве вам не стоит использовать функцию await?

Sagiv b.g 28.07.2018 11:28

Я отредактировал свой пост, но может я что-то не так делаю? Ссылка на функцию, похоже, все еще не работает

K20GH 28.07.2018 11:58
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
53
0

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