Pourquoi Async/Await ne peut-il pas être utilisé dans les constructeurs JavaScript ?

Invocation asynchrone au sein des constructeurs : une entreprise impossible

La programmation asynchrone utilisant async/await est devenue monnaie courante, mais son application au sein d'une fonction constructeur soulève un défi fascinant. Considérez l'extrait de code suivant :

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>

Malheureusement, ce code échoue avec le message d'erreur :

Le constructeur de classe n'est peut-être pas une méthode asynchrone

La raison en est fondamental : une fonction constructeur est chargée d’initialiser et de renvoyer une instance d’objet. Cependant, le mot clé async convertit une fonction en générateur de promesse, ce qui fait que la fonction renvoie une promesse au lieu de l'objet lui-même. Cela crée un conflit inhérent.

Dévoiler l'impossibilité

L'idée fausse naît de la similitude perçue entre l'asynchrone/l'attente et les promesses. Bien que async/await fournisse du sucre syntaxique pour travailler avec les promesses, il ne modifie pas le comportement sous-jacent. Les promesses représentent des opérations asynchrones qui sont résolues ou rejetées pour produire une valeur.

En revanche, une fonction constructeur doit renvoyer l'objet en cours de construction. Cette exigence immuable ne peut pas être conciliée avec le comportement prometteur d'une fonction asynchrone.

Stratégies de contournement

Pour surmonter cette limitation, envisagez d'utiliser l'un des modèles de conception suivants :

1. Fonction d'initialisation (init()) : Introduire une fonction d'initialisation pour effectuer des tâches asynchrones. L'instance d'objet ne peut être utilisée que dans cette fonction.

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

2. Modèle de constructeur : Au lieu d'appeler directement le constructeur, utilisez une fonction de constructeur pour créer un objet exemple. La fonction de création renvoie une promesse qui se résout en instance d'objet une fois que toutes les tâches asynchrones sont terminées.

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

Notez que même si les exemples ci-dessus utilisent des promesses dans le modèle de création, des rappels peuvent également être utilisés.

Considérations sur les fonctions statiques

Il est important de noter que le mot-clé this dans les fonctions statiques ne ne fait pas référence à l'objet instancié mais à la classe elle-même. Par conséquent, vous ne pouvez pas appeler des méthodes directement dans des fonctions statiques. Au lieu de cela, faites référence aux méthodes en utilisant le nom de la classe ou déclarez-les comme méthodes statiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!