0

Como eu faço para que no meu construtor seja feita uma requisição Ajax e atribuir os valores dessa requisição aos meus atributos?

Até o momento está assim e não está funcionando, eu estou retornando 2 jsons... no console.log os atributos estão vazios, ou seja, a atribuição não está sendo feita, a consulta funciona normalmente lá no meu PHP, já testei.

O console não apresenta nada Usando 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);
  });

2 Respostas 2

2

Tens 2 problemas aqui:

  • #1: O this dentro do ajax está a apontar para a instância do jQuery, e não para o teu construtor pois não é uma propriedade dele.

  • #2: O ajax é assíncrono, não podes fazer console.log depois de instanciar a classe, pois isso acontece antes da respostas vir do servidor.

#1:

Dentro de success: function(pergunta, desafio){ o this aponta para o jQuery, e não para o que está à volta. Assim se quiseres ter o this a apontar para a tua classe tens 3 alternativas:

  • usar a propriedade context e passar aí a referência do contexto que queres:

Exemplo:

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;

     }
});
  • podes usar um sósia/alias, dando o nome self ao this fora do success do jQuery para teres um ponteiro depois (a ideia que o Heber também sugeriu).

Exemplo:

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;
     }
});
  • usar arrow functions que não mudam o contexto de execução:

Exemplo:

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:

Aqui tens de usar callbacks, promises ou async/await

Um exemplo com Promisses poderia ser assim:

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 com 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>

14
  • Eu tentei usar as arrow functions e coloquei uma função pra exibir, mas não me é exibido nada, da undefined. Vou editar a pergunta, pra você ver. Commented 1/05/2017 às 13:18
  • @TiagoSilveira essa nova versão com exibir tem o mesmo problema. Viste a minha demo com promisses? é a ideia de .exibir() mas respeitando a natureza assíncrona do ajax. Testa essa ideia.
    – Sergio
    Commented 1/05/2017 às 16:05
  • fiz com o promisse, mas nem o console log funciona, fiz as alterações devidas dando o get pra minha api, testei a api pura e a consulta ta normal. Vou alterar a pergunta com o código editado. Commented 1/05/2017 às 16:31
  • @TiagoSilveira usa o meu código e cria um jsFiddle com o teu códig para eu ver
    – Sergio
    Commented 1/05/2017 às 16:37
  • Como meu código não está online eu fiz usando outro jsonplaceholder e não funcionou, olha o fiddle: jsfiddle.net/L0yb12og/3 Json: jsonplaceholder.typicode.com/posts Commented 1/05/2017 às 16:46
1

O escopo da função success da requisição ajax é diferente do escopo do constructor, tente isto:

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

Lembre-se também que é um método assíncrono, então só irá "preencher" o valor após a requisição finalizar.

3
  • testei, mas não rolou, editei a pergunta. Commented 1/05/2017 às 14:46
  • Você não está considerando que a requisição é assíncrona, é outra, está utilizando o alias self junto com a Arrow function, veja a explicação do colega abaixo novamente, também implemente a promise, isso resolve o seu problema.
    – mminetto
    Commented 1/05/2017 às 16:30
  • No console do Chrome você consegue ver as propriedades da instância dá classe pergunta após a requisição, imaginei que o problema fosse apenas o escopo.
    – mminetto
    Commented 1/05/2017 às 16:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .