Конструктор класів Async / Await

На даний момент я намагаюся використовувати async/awaitфункцію конструктора класу. Це так, що я можу отримати спеціальний e-mailтег для проекту Electron, над яким я працюю.

customElements.define('e-mail', class extends HTMLElement {
  async constructor() {
    super()

    let uid = this.getAttribute('data-uid')
    let message = await grabUID(uid)

    const shadowRoot = this.attachShadow({mode: 'open'})
    shadowRoot.innerHTML = `
      <div id="email">A random email message has appeared. ${message}</div>
    `
  }
})

Наразі проект не працює, із наступною помилкою:

Class constructor may not be an async method

Чи є спосіб обійти це питання, щоб я міг використовувати async / очікувати всередині цього? Замість того, щоб вимагати зворотних дзвінків або .then ()?

Це ніколи не може працювати.

asyncКлючове слово дозволяє awaitбути використано в функції , поміченої як , asyncале він також перетворює цю функцію в генератор обіцянки. Отже функція, позначена символом async, поверне обіцянку. Конструктор з іншого боку повертає об'єкт, який він будує. Таким чином, у нас виникла ситуація, коли ви хочете повернути об'єкт і обіцянку: неможлива ситуація.

Ви можете використовувати async / await лише там, де ви можете використовувати обіцянки, оскільки вони по суті є синтаксичним цукром для обіцянок. Ви не можете використовувати обіцянки в конструкторі, оскільки конструктор повинен повернути об'єкт, який буде побудовано, а не обіцянку.

Для подолання цього є дві моделі дизайну, обидві придумані до того, як обіцянки були навколо.

1. Використання init()функції. Це працює трохи як jQuery's .ready(). Об'єкт, який ви створюєте, може використовуватися лише всередині власного initабо readyфункціонального:

   Використання:

   var myObj = new myClass();
   myObj.init(function() {
       // inside here you can use myObj
   });

   Впровадження:

   class myClass {
       constructor () {
   
       }
   
       init (callback) {
           // do something async and call the callback:
           callback.bind(this)();
       }
   }

2. Використовуйте будівельник. Я не бачив, щоб це багато використовувалося в JavaScript, але це одна з найбільш поширених робочих ситуацій на Java, коли об'єкт потрібно будувати асинхронно. Звичайно, модель конструктора використовується при побудові об'єкта, який вимагає безлічі складних параметрів. Що саме є випадком використання для асинхронних будівельників. Різниця полягає в тому, що асинхронний конструктор не повертає об'єкт, а обіцянку цього об'єкта:

   Використання:

   myClass.build().then(function(myObj) {
       // myObj is returned by the promise, 
       // not by the constructor
       // or builder
   });
   
   // with async/await:
   
   async function foo () {
       var myObj = await myClass.build();
   }

   Впровадження:

   class myClass {
       constructor (async_param) {
           if (typeof async_param === 'undefined') {
               throw new Error('Cannot be called directly');
           }
       }
   
       static build () {
           return doSomeAsyncStuff()
              .then(function(async_result){
                  return new myClass(async_result);
              });
       }
   }

   Реалізація за допомогою асинхронізації / очікування:

   class myClass {
       constructor (async_param) {
           if (typeof async_param === 'undefined') {
               throw new Error('Cannot be called directly');
           }
       }
   
       static async build () {
           var async_result = await doSomeAsyncStuff();
           return new myClass(async_result);
       }
   }

Примітка. Хоча у наведених вище прикладах ми використовуємо обіцянки для конструктора async, вони не є строго необхідними. Ви так само легко можете написати будівельника, який приймає зворотний дзвінок.

Примітка щодо виклику функцій всередині статичних функцій.

Це не має нічого спільного з конструкторами асинхронізації, але з тим, що ключове слово thisнасправді означає (що може бути трохи дивно для людей, що походять з мов, які роблять автоматичну роздільну здатність імен методів, тобто мов, які не потребують thisключового слова).

thisКлючове слово відноситься до екземпляру об'єкту. Не клас. Тому зазвичай не можна використовувати thisвсередині статичних функцій, оскільки статична функція не пов'язана з будь-яким об'єктом, а безпосередньо пов'язана з класом.

Тобто, у наступному коді:

class A {
    static foo () {}
}

Ви не можете робити:

var a = new A();
a.foo() // NOPE!!

замість цього потрібно називати це як:

A.foo();

Тому наступний код призведе до помилки:

class A {
    static foo () {
        this.bar(); // you are calling this as static
                    // so bar is undefinned
    }
    bar () {}
}

Щоб виправити це, ви можете зробити barзвичайну функцію або статичний метод:

function bar1 () {}

class A {
    static foo () {
        bar1();   // this is OK
        A.bar2(); // this is OK
    }

    static bar2 () {}
}

Ви можете впевнено зробити це. В основному:

class AsyncConstructor {
    constructor() {
        return (async () => {

            // All async code here
            this.value = await asyncFunction();

            return this; // when done
        })();
    }
}

щоб створити використання класу:

let instance = await new AsyncConstructor();

Це рішення має кілька коротких падінь, хоча:

superПримітка . Якщо вам потрібно скористатися super, ви не можете зателефонувати в межах зворотного зв'язку async.

Примітка TypeScript: це спричиняє проблеми з TypeScript, оскільки конструктор повертає тип Promise<MyClass>замість MyClass. Не існує остаточного способу вирішити це, про що я знаю. Один з потенційних способів, запропонованих @blitter, - це поставити /** @type {any} */на початку корпус конструктора - я не знаю, чи це працює у всіх ситуаціях.

Оскільки функції асинхронізації є обіцянками, ви можете створити статичну функцію для свого класу, яка виконує функцію асинхронізації, яка повертає екземпляр класу:

class Yql {
  constructor () {
    // Set up your class
  }

  static init () {
    return (async function () {
      let yql = new Yql()
      // Do async stuff
      await yql.build()
      // Return instance
      return yql
    }())
  }  

  async build () {
    // Do stuff with await if needed
  }
}

async function yql () {
  // Do this instead of "new Yql()"
  let yql = await Yql.init()
  // Do stuff with yql instance
}

yql()

Дзвінок за let yql = await Yql.init()допомогою функції асинхронізації.

Виходячи з ваших коментарів, ви, ймовірно, повинні робити те, що робить будь-який інший HTMLElement із завантаженням активів: змусити конструктор розпочати дію побічної завантаження, генеруючи подія завантаження чи помилки залежно від результату.

Так, це означає використовувати обіцянки, але це також означає "робити речі так само, як і кожен інший HTML-елемент", тож ви в хорошій компанії. Наприклад:

var img = new Image();
img.onload = function(evt) { ... }
img.addEventListener("load", evt => ... );
img.onerror = function(evt) { ... }
img.addEventListener("error", evt => ... );
img.src = "some url";

це починає асинхронне навантаження вихідного активу, яке, коли воно досягає успіху, закінчується onloadі коли йде не так, закінчується onerror. Отже, змусьте це зробити і ваш власний клас:

class EMailElement extends HTMLElement {
  constructor() {
    super();
    this.uid = this.getAttribute('data-uid');
  }

  setAttribute(name, value) {
    super.setAttribute(name, value);
    if (name === 'data-uid') {
      this.uid = value;
    }
  }

  set uid(input) {
    if (!input) return;
    const uid = parseInt(input);
    // don't fight the river, go with the flow
    let getEmail = new Promise( (resolve, reject) => {
      yourDataBase.getByUID(uid, (err, result) => {
        if (err) return reject(err);
        resolve(result);
      });
    });
    // kick off the promise, which will be async all on its own
    getEmail()
    .then(result => {
      this.renderLoaded(result.message);
    })
    .catch(error => {
      this.renderError(error);
    });
  }
};

customElements.define('e-mail', EmailElement);

А потім ви змушуєте функції renderLoaded / renderError розбиратися з викликами події та тіньовим домом:

  renderLoaded(message) {
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <div class="email">A random email message has appeared. ${message}</div>
    `;
    // is there an ancient event listener?
    if (this.onload) {
      this.onload(...);
    }
    // there might be modern event listeners. dispatch an event.
    this.dispatchEvent(new Event('load', ...));
  }

  renderFailed() {
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <div class="email">No email messages.</div>
    `;
    // is there an ancient event listener?
    if (this.onload) {
      this.onerror(...);
    }
    // there might be modern event listeners. dispatch an event.
    this.dispatchEvent(new Event('error', ...));
  }

Також зверніть увагу, що я змінив ваш idнаclass , оскільки, якщо ви не напишете якийсь дивний код, щоб коли-небудь дозволити один екземпляр вашого <e-mail>елемента на сторінці, ви не можете використовувати унікальний ідентифікатор, а потім призначити його купі елементів.

Я зробив цей тестовий випадок на основі відповіді @ Downgoat.
Він працює на NodeJS. Це код Downgoat, де частина асинхронізації забезпечується setTimeout()викликом.

'use strict';
const util = require( 'util' );

class AsyncConstructor{

  constructor( lapse ){
    this.qqq = 'QQQ';
    this.lapse = lapse;
    return ( async ( lapse ) => {
      await this.delay( lapse );
      return this;
    })( lapse );
  }

  async delay(ms) {
    return await new Promise(resolve => setTimeout(resolve, ms));
  }

}

let run = async ( millis ) => {
  // Instatiate with await, inside an async function
  let asyncConstructed = await new AsyncConstructor( millis );
  console.log( 'AsyncConstructor: ' + util.inspect( asyncConstructed ));
};

run( 777 );

Мій випадок використання - DAO для серверного веб-додатку.
Як я бачу DAO, кожен з них асоціюється у форматі запису, у моєму випадку колекція MongoDB, як, наприклад, кухар.
Екземпляр cooksDAO містить дані кухаря.
На моїй неспокійній свідомості я міг би встановити DAO кухаря, подаючи cooId в якості аргументу, і інстанція створить об'єкт і заповнить його даними кухаря.
Таким чином, потрібно запустити асинхронний матеріал у конструктор.
Я хотів написати:

let cook = new cooksDAO( '12345' );  

мати доступні властивості, як cook.getDisplayName().
З цим рішенням я повинен зробити:

let cook = await new cooksDAO( '12345' );  

що дуже схоже на ідеал.
Також мені потрібно зробити це всередині asyncфункції.

Мій план B полягав у тому, щоб залишити завантаження даних із конструктора, грунтуючись на пропозиції @slebetman використовувати функцію init, і зробити щось подібне:

let cook = new cooksDAO( '12345' );  
async cook.getData();

що не порушує правила.

використовувати метод асинхронної конструкції ???

constructor(props) {
    super(props);
    (async () => await this.qwe(() => console.log(props), () => console.log(props)))();
}

async qwe(q, w) {
    return new Promise((rs, rj) => {
        rs(q());
        rj(w());
    });
}

Рішення зупинки

Ви можете створити async init() {... return this;}метод, а натомість робити це new MyClass().init()завжди, коли ви зазвичай просто говорите new MyClass().

Це не є чистою, тому що вона завжди покладається на всіх, хто використовує ваш код, і на вас, щоб завжди інстанціювати об'єкт таким чином. Однак якщо ви використовуєте цей об'єкт лише в певному місці або в коді, це може бути добре.

Однак значна проблема виникає через те, що в ES немає системи типів, тому якщо ви забули її назвати, ви щойно повернулися undefined оскільки конструктор нічого не повертає. На жаль Набагато краще було б зробити щось на кшталт:

Найкраще було б зробити:

class AsyncOnlyObject {
    constructor() {
    }
    async init() {
        this.someField = await this.calculateStuff();
    }

    async calculateStuff() {
        return 5;
    }
}

async function newAsync_AsyncOnlyObject() {
    return await new AsyncOnlyObject().init();
}

newAsync_AsyncOnlyObject().then(console.log);
// output: AsyncOnlyObject {someField: 5}

Заводський метод рішення (трохи краще)

Однак тоді ви можете випадково зробити новий AsyncOnlyObject, ви, мабуть, просто створите заводську функцію, яка Object.create(AsyncOnlyObject.prototype)безпосередньо використовує :

async function newAsync_AsyncOnlyObject() {
    return await Object.create(AsyncOnlyObject.prototype).init();
}

newAsync_AsyncOnlyObject().then(console.log);
// output: AsyncOnlyObject {someField: 5}

Однак скажіть, що ви хочете використовувати цей візерунок на багатьох об'єктах ... ви можете абстрагувати це як декоратор або щось, що ви (багатослівно, тьфу) називаєте після визначення, як postProcess_makeAsyncInit(AsyncOnlyObject), але тут я збираюся використовувати, extendsтому що він вписується в семантику підкласу (підкласи є батьківським класом + додатково, тому що вони повинні підкорятися проектному договору батьківського класу та можуть робити додаткові речі; підклас асинхронізації був би дивним, якби батько також не був асинхронізованим, оскільки його не можна було ініціалізувати тим самим спосіб):

Скорочене рішення (версія / розширення / підклас)

class AsyncObject {
    constructor() {
        throw new Error('classes descended from AsyncObject must be initialized as (await) TheClassName.anew(), rather than new TheClassName()');
    }

    static async anew(...args) {
        var R = Object.create(this.prototype);
        R.init(...args);
        return R;
    }
}

class MyObject extends AsyncObject {
    async init(x, y=5) {
        this.x = x;
        this.y = y;
        // bonus: we need not return 'this'
    }
}

MyObject.anew('x').then(console.log);
// output: MyObject {x: "x", y: 5}

(не використовуйте у виробництві. Я не продумав складні сценарії, наприклад, чи це правильний спосіб написання обгортки для аргументів ключових слів.)

На відміну від інших, сказали, ви можете змусити його працювати.

JavaScript classможуть повернути буквально все, що завгодно constructor, навіть екземпляр іншого класу. Отже, ви можете повернути a Promiseз конструктора вашого класу, який вирішує його фактичний екземпляр.

Нижче наведено приклад:

export class Foo {

    constructor() {

        return (async () => {

            // await anything you want

            return this; // Return the newly-created instance
        }).call(this);
    }
}

Потім ви створите екземпляри Fooтаким чином:

const foo = await new Foo();

Якщо ви можете уникнути extend , ви можете уникати занять всі разом і використовувати композицію функцій як конструктори . Ви можете використовувати змінні в області замість членів класу:

async function buildA(...) {
  const data = await fetch(...);
  return {
    getData: function() {
      return data;
    }
  }
}

і просто використовувати його як

const a = await buildA(...);

Якщо ви використовуєте машинопис або потік, ви навіть можете застосувати інтерфейс конструкторів

Interface A {
  getData: object;
}

async function buildA0(...): Promise<A> { ... }
async function buildA1(...): Promise<A> { ... }
...

Варіант на шаблоні будівельника за допомогою call ():

function asyncMethod(arg) {
    function innerPromise() { return new Promise((...)=> {...}) }
    innerPromise().then(result => {
        this.setStuff(result);
    }
}

const getInstance = async (arg) => {
    let instance = new Instance();
    await asyncMethod.call(instance, arg);
    return instance;
}

Ви можете негайно викликати анонімну функцію асинхронізації, яка повертає повідомлення та встановлює його на змінну повідомлення. Можливо, ви захочете поглянути на негайно викликані вирази функцій (IEFES), якщо ви не знайомі з цим шаблоном. Це спрацює як шарм.

var message = (async function() { return await grabUID(uid) })()

@ прийнята відповідь slebetmen добре пояснює, чому це не працює. На додаток до двох шаблонів, представлених у цій відповіді, ще одним варіантом є доступ до ваших властивостей асинхронізації лише за допомогою спеціального асинхронного геттера. Конструктор () може потім запустити створення асинхронних властивостей, але getter потім перевіряє, чи є властивість доступною, перш ніж вона використовує або повертає її.

Цей підхід особливо корисний, коли ви хочете ініціалізувати глобальний об'єкт один раз при запуску, і ви хочете зробити це всередині модуля. Замість ініціалізації у вашому index.jsі передачі екземпляра в потрібні місця простоrequire ваш модуль, де потрібен глобальний об'єкт.

Використання

const instance = new MyClass();
const prop = await instance.getMyProperty();

Впровадження

class MyClass {
  constructor() {
    this.myProperty = null;
    this.myPropertyPromise = this.downloadAsyncStuff();
  }
  async downloadAsyncStuff() {
    // await yourAsyncCall();
    this.myProperty = 'async property'; // this would instead by your async call
    return this.myProperty;
  }
  getMyProperty() {
    if (this.myProperty) {
      return this.myProperty;
    } else {
      return this.myPropertyPromise;
    }
  }
}

Інші відповіді відсутні очевидними. Просто зателефонуйте до функції конструктора асинхронізації:

constructor() {
    setContentAsync();
}

async setContentAsync() {
    let uid = this.getAttribute('data-uid')
    let message = await grabUID(uid)

    const shadowRoot = this.attachShadow({mode: 'open'})
    shadowRoot.innerHTML = `
      <div id="email">A random email message has appeared. ${message}</div>
    `
}

Ви повинні додати thenфункцію до примірника. Promiseрозпізнає його як об'єкт, що піддається обробці, Promise.resolveавтоматично

const asyncSymbol = Symbol();
class MyClass {
    constructor() {
        this.asyncData = null
    }
    then(resolve, reject) {
        return (this[asyncSymbol] = this[asyncSymbol] || new Promise((innerResolve, innerReject) => {
            this.asyncData = { a: 1 }
            setTimeout(() => innerResolve(this.asyncData), 3000)
        })).then(resolve, reject)
    }
}

async function wait() {
    const asyncData = await new MyClass();
    alert('run 3s later')
    alert(asyncData.a)
}