-1
  class App {
    constructor() {
        this.imgUrl = '';
        this.fileName = '';
        this.fileSize = null;
        this.id = null;
        this.fileExtension = '';
    }

    async setDataUrl(e) {

        await new Promise((resolve,reject)=>{
            try{
                this.imgUrl= e;
                resolve();
            }catch(e){
                reject(e)
            }
        });
        console.log(this.imgUrl)
    }

    async handleFile(e) {
        await new Promise((resolve, reject)=>{
            try {
                let files = e.target.files;
                let image = files[0];
                let reader = new FileReader();
                this.fileName = image.name;
                this.fileSize = image.size;
                this.id = (e.target.id !== 'secondImg' ? this.id = 1 : this.id = 2);
                reader.onload = (function () {
                    return function (e) {
                       app.setDataUrl(e.target.result);
                    };
                })(image);
                reader.readAsDataURL(image);
                resolve();

            }
            catch(error){
                reject(error);
            }
        });
    }

    render() {
        let span = document.createElement('span');
        let element = document.getElementById('contentContainer');
        span.innerHTML = [`<img class="img"`, `src="${this.imgUrl}"/>`].join('');

    }
}
let app = new App();
let el = document.getElementById('btn');
el.addEventListener('change', async function(e) {
    try {

        await app.handleFile(e);
        console.log(app.url);// Вот тут выдает undefined
        app.render();

    } catch (error) {
        console.log(error)

    }


});

С прошлым примером все получилось, поэкспериментировал - вроде бы все работает. Решил применить в задаче. Загружается файл, и его урл хочу сохранить как поле класса. в set методе, отрабатывает нормально, но как только хочу его вывести для рендера, или за приделами класса - undefined... Возможно у меня тут проблема не с асинхронностью ? а с общей корявостью рук ? Или и с ней в том числе :)

4
  • чтобы это работало как ты хочешь, нужно внутри async функций использовать await. Без этого, ты можешь убрать async из определения и ничего не изменится.
    – Grundy
    21 мая 2019 в 18:42
  • setDataUrl там не нужен промис, resolve из handleFile нужно поместить в onload и зачем там IIFE? Передаете image, но при этом не используете его
    – ThisMan
    22 мая 2019 в 8:47
  • Если вам нужен ответ на второй вопрос - задавайте второй вопрос. Менять вопрос уже после того как на него ответили - некрасиво! 22 мая 2019 в 10:47
  • @PavelMayorov Приношу свои извинения, не знал. 23 мая 2019 в 8:39

1 ответ 1

1

let func1 = async function () {
  /**
  * Что бы функция и правда была асинхронной
  * Нужен промис, завершение которого мы будем дожидаться
  * с помощью await
  */
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      try {
        console.log(1);
        resolve();
      } catch (e) {
        reject(e);
      }
    }, 1000);
  });
};

let func2 = async function () {
  /**
  * Здесь только синхронный код
  * но так как используем async перед функцией
  * она все равно вернет промис
  */
  console.log(2);
};


let func = async function () {
  try {
    console.log('start');
    await func1();
    await func2(); // await здесь по сути ничего не делает, можно и без него
    console.log('end');
  } catch (e) {
    console.log(e);
  }
};
func();

12
  • А вы проверяли что именно возвращает вызов func2() в вашем коде? 21 мая 2019 в 19:31
  • Кстати, зачем вообще func1 у вас объявлена как async? 21 мая 2019 в 19:32
  • @PavelMayorov ладно, ладно) Раскусили, я поправил
    – ThisMan
    21 мая 2019 в 19:39
  • Осталось поправить первую строку ответа... 21 мая 2019 в 19:45
  • И console.log(1) лучше бы наружу вынести. Нехороший это паттерн - внутри setTimeout код писать без try-catch, легко ошибку упустить. 21 мая 2019 в 19:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.