1

Tengo una clase con un método ascyncrono que define varias propiedades de mi objeto, lo que quiero conseguir es obtener estas propiedades pero solo cuando ya fueron definidas por mi método, Algo asi como el evento load de los elementos html.

Dejo un ejemplo con setTimeout para demostrar que al cabo de 2 segundos la propiedad se define y ya puede ser accedida.

class AsyncClass {
  constructor(){
    this.img;
    this.getImg();
  }
  // Metodo Asyncrono
  getImg(){
    new Promise(loadImg => {
      let img = new Image();
      img.onload = function(){
        loadImg(this);
      }
      img.src = 'https://images7.alphacoders.com/803/803071.jpg';
    }).then(img => {
      this.img = img;
      document.getElementById('image').src = this.img.src;
    });
  }
  
}

var a = new AsyncClass();
// Aqui mi objeto aun no esta definido
console.log(a.img);
// Espero 2 segundos para poder mostrar mi objeto
setTimeout(function(){
  console.log(a.img);
},2000)
#image {
  width: 200px;
  height: 100px;
}
<img id="image"></img>

1 respuesta 1

1

Tu funcion getImg es asincrona, y tus llamadas son sincronas, para solucionar tu problema, puedes usar callback en la funcion getImg, de esa manera no es necesario usar setTimeout

class AsyncClass {
  constructor(){
    this.img;
  }
  // Metodo Asyncrono
  getImg(done){
    new Promise(loadImg => {
      let img = new Image();
      img.onload = function(){
        loadImg(this);
      }
      img.src = 'https://images7.alphacoders.com/803/803071.jpg';
    }).then(img => {
      this.img = img;
      document.getElementById('image').src = this.img.src;
      return done(null,this.img);
    });
  }
  
}

var a = new AsyncClass();
a.getImg(function(err,img){
console.log(img);
})
#image {
  width: 200px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image"></img>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.