JS, await with new

01 марта 2021, 14:50

Всем привет. Помогите пожалуйста подружить асинхронность c оператором new. Задача такая, есть функция-конструктор которая настраивает объект перед использованием. Одна из настроек - загрузка картинки. Происходит не мгновенно. Здесь по хорошему нужно загрузку картинки обернуть в промисиз и заивейтить код в этом месте. Но getApp -это не асинхронная функция, а конструктор. Я не пойму как подружить конструктор и await. Вот пример условного кода:

function getApp(width, ctx) {
   const wh = width;
   const ln = 1,5*width;
   const img = new Image;
   const img.src = spritesSrc; // с этого момента код побежал дальше а ресурс еще грузится.Нужно эвейтить. 
    return {
       render() {
           ctx.draw(img....)
           ...
}
...
const app = new getApp(100, ctx)
app.render();
....

Answer 1

Асинхронный конструктор, это не совсем хорошая идея. В вашем случае, вы еще возвращаете какой-то другой объект. Я бы предложил завести св-во, которое отображало бы процесс инициализации объекта и резолвилось бы после того, как с экземпляром можно работать

Синтетический пример

class SomeClass { 
  loaded = null 
  prop = 0 
   
  constructor() { 
    // Делаем какую-то асинхронную операцию 
    this.loaded = new Promise(resolve => 
      setTimeout(() => { 
         this.prop = 10; 
         resolve(); 
      }, 1000) 
    ); 
  } 
} 
 
(async () => { 
  const inst = new SomeClass(); 
  console.log('До инициализации: ', inst.prop); 
  await inst.loaded; 
  console.log('После инициализации: ', inst.prop); 
})();

Пока что нельзя использовать await на самом верхнем уровне, но пропозал уже есть, когда его примут, можно будет убрать асинхронную функцию обертку

Answer 2

Попробуй так:

async function getApp(width, ctx) {...}

const app = await getApp(100, ctx)

Последний мною написаный код должен находиться внутри функции объявленной с использованием async.

Потому как оператор await заставляет функцию, ждать выполнения Promise и продолжать выполнение после возвращения Promise значения. Подробней тут: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/await