Ajax request in ES6 constructor

Question

How I make a request in my constructor Ajax and assign the values of that request to my attributes?

So far it’s like this and it’s not working, I’m returning 2 jsons... in the console.log attributes are empty, that is, the assignment is not being made, the query works normally there in my PHP, I’ve tried it before.

The console shows nothing Using Promisse:

    class pergunta {
      constructor(perguntas, respostas, desafios) {
          return new Promise((perguntas, respostas, desafios) => {
              jQuery.ajax({
                  url: '../php/consulta.php' + location.search,
                  type: "GET",
                  dataType: 'json',
                  success: (pergunta, resposta, desafio) => {
                      this.perguntas = pergunta.pergunta;
                      this.respostas = pergunta.resposta;
                      this.desafios = desafio.descricao;
                  }
              });
          });
      }
  }

  new pergunta().then((perguntas) => {
      console.log(pergunta);
  });

Answer 1

You got two problems here:

• #1: The this inside ajax is pointing to jQuery instance, not your constructor because it is not a property of it.

• #2: Ajax is asynchronous, you can’t do console.log after instantiating the class, as this happens before the replies come from the server.

#1:

Within success: function(pergunta, desafio){ the this aim for jQuery, not what’s around. So if you want to have jQuery this pointing to your class you have 3 alternatives:

• use the property context and pass on the context reference you want:

Example:

jQuery.ajax({
   url: '../php/consulta.php' + location.search,
   type: "GET",
   dataType: 'json',
   context: this,
   success: function(pergunta, desafio){
       this.perguntas = pergunta.pergunta;
       this.respostas = pergunta.resposta;
       this.desafios = desafio.descricao;

     }
});

• you can use a sósia/alias, naming self this out of the success jQuery to have a pointer after (the idea that Heber also suggested that).

Example:

const self = this;
jQuery.ajax({
   url: '../php/consulta.php' + location.search,
   type: "GET",
   dataType: 'json',
   success: function(pergunta, desafio){
       self.perguntas = pergunta.pergunta;
       self.respostas = pergunta.resposta;
       self.desafios = desafio.descricao;
     }
});

• use arrow functions that do not change the execution context:

Example:

jQuery.ajax({
   url: '../php/consulta.php' + location.search,
   type: "GET",
   dataType: 'json',
   success:(pergunta, desafio) => {
       this.perguntas = pergunta.pergunta;
       this.respostas = pergunta.resposta;
       this.desafios = desafio.descricao;
     }
});

#2:

Here you have to use callbacks, Promises or async/await

An example with Promisses could be like this:

class pergunta {
    constructor(id, title) {
        return new Promise((res, rej) => {
            jQuery.ajax({
                url: '../php/consulta.php' + location.search,
                type: "GET",
                dataType: 'json',
                success: (pergunta, desafio) => {
                    this.perguntas = pergunta.pergunta;
                    this.respostas = pergunta.resposta;
                    this.desafios = desafio.descricao;
                }
            });
        });
    }
}

new pergunta().then((perguntas) => {
    console.log(perguntas);
});

---

Demo with promisse:

class pergunta {
  constructor(id, title) {
    return new Promise((res, rej) => {
      jQuery.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts/1',
        type: "GET",
        dataType: 'json',
        success: ({
          id,
          title
        }) => {
          this.id = id;
          this.title = title;
          res(this);
        }
      });
    });
  }
}
new pergunta().then((perguntas) => {
  console.log(perguntas);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

The scope of the Success function of the ajax request is different from the scope of the constructor, try this:

class pergunta {

      constructor(perguntas = [], respostas = [], desafios = [], valor = 100, posicao = 0){

        var _self = this;

        [.. código suprimido ..]

        jQuery.ajax({
           url: '../php/consulta.php' + location.search,
           type: "GET",
           dataType: 'json',
           success: function(data){
               _self.perguntas = data.perguntas;
               _self.respostas = data.respostas;
               _self.desafios = data.desafios;
           }
        });
    }
}
const perguntas = new pergunta();
console.log(perguntas);

Also remember that it is an asynchronous method, so it will only "fill out" the value after the request is finished.