Como instanciar e utilizar um método de outra classe no constructor | TypeScript parte 1: evoluindo seu JavaScript

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

Referente ao curso TypeScript parte 1: evoluindo seu JavaScript

por Lucas Vernareccia

| 60.5k xp | 4 posts

Front End Developer

Estou tentando desenvolver uma api para calcular o salário clt, porém ao instanciar a classe AjaxHelper (responsavel pelas conexões) não consigo receber o json parseado segue o código.

class AjaxHelper {

    public data : object;
    private xhr : XMLHttpRequest;

    constructor( private reqtype : string, private uri : string, private async : boolean) {

        const domain = 'https://private-4e803-salarycalculatorapi.apiary-mock.com';

        this.xhr = new XMLHttpRequest();   
        this.xhr.onloadend = () => this.requestData();
        this.xhr.onerror = () => this.connectionError(); 
        this.xhr.open(this.reqtype, domain + this.uri, this.async, null, null);
        this.xhr.send(null);
    }

    requestData() {
        if(this.xhr.readyState == 4 && this.xhr.status == 200)  {
            this.data = JSON.parse(this.xhr.responseText);    
        } 
    }

    connectionError() {
        throw new Error('A Conexão Falhou.');
    }

    get mydata() {
        return this.data;
    }
}

E agora segue a class subsequente criada

class Inss {

    public request : AjaxHelper;
    public data : object;

    constructor(private salarioBruto : number) {
        this.request = new AjaxHelper('GET', '/inss', true); //retorna o objeto
        this.data = this.request.mydata;//não retorna o objeto
    }

    get inss(){
        return this.data;
    }
}

let my = new AjaxHelper('GET', '/inss', true); // No console retorna undefined

my.mydata; // retorna o objeto

2 respostas

solução!

por Flavio Henrique de Souza Almeida

| 3119.3k xp | 6969 posts

Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

05/10/2017

Bom dia. Seu código não vai funcionar como você esta esperando. Sua operação AJAX é assíncrona e para você obter o resultado dela você precisa passar um callback ou usar o padrão de projeto promise.

Sobre o assincronismo do XMLHTTPREQUEST Você pode reforçar o conceito aqui:

https://cursos.alura.com.br/course/javascript-programando-na-linguagem-web/task/24363

E também aqui

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-2/task/17502

Neste último, principalmente quando o serviço HttpService é criado ele faz exatamente o conceito de callback que lhe informei nos parágrafos anteriores. Inclusive você pode se basear nessa classe como espelho para seu helper.

Por fim, se quiser usar algo mais moderno como Fetch API você pode conferir esse vídeo

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-3/task/20291

Em suma, revisar esses tópicos o deixará ainda mais seguro para lidar com situações como essa que você esta enfrentando.

Sucesso e bom estudo meu aluno!

por Lucas Vernareccia

| 60.5k xp | 4 posts

Front End Developer

05/10/2017

Flavio desde já muito obrigado me orientou a seguir um outro caminho que está dando certo porém como posso retornar o objeto ao escopo da clase Inss. Att. Obrigado!!!

class HttpService {

    private url : string;
    private data : Array<object>;

    constructor(private uri : string ) {
        const domain = 'https://private-4e803-salarycalculatorapi.apiary-mock.com';
        this.url = domain + this.uri;

    }

    _handleErrors(response : any) {
        if(!response.ok) throw new Error(response.statusText);
        return response;
    }

    GET() {
        return fetch(this.url)
            .then(response => this._handleErrors(response))
            .then(response => response.json());

    }

    POST(url : string, data : object) {

        return fetch(url, {
            headers: { 'Content-type' : 'application/json'},
            method: 'post',
            body: JSON.stringify(data)
        })
        .then(res => this._handleErrors(res));

    }
}

E agora a Class que instancia o helper "INSS"

class Inss {

    private request : HttpService;
    private data : any;

    constructor() {
        this.request = new HttpService('/inss');
    }

    getInssTable() {         
        return this.request
            .GET()
                .then(object => { 
                    console.log(object);
                    return object;

                })
                .catch(erro => {
                    throw new Error('Não foi possível obter as negociações da semana');
                });  
    }
}

let my = new Inss();