Порядок вызова функции js async

104

31 декабря 2020, 13:50

  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... Возможно у меня тут проблема не с асинхронностью ? а с общей корявостью рук ? Или и с ней в том числе :)

Answer 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();