0

tengo una gran problemática. estoy tratando de retornar el responsive mediante Fetch, pero lo único que obtengo es como valor undefined.

agradecería si alguien me pudiera orientar y explicarme en que estoy fallando. saludos.

les dejo el código que estoy realizando.

--Lo que estoy haciendo aquí es una clase llamada loadFetch. dentro de su estructura tengo declarado un constructor donde le paso su respectiva URL y la data si es necesario.

luego creo dos funciones. una esta realizando una llamada al controlador sin enviarle datos, y la otra le envía los datos correspondientes.

class LoadFetch {
    constructor(Url, Data){
        this.url = Url;
        this.data = Data;
    }

    async FetchNotData() {
        await fetch(this.url, {
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(res => res.json()).then(json => {
            return json;
        });
            
    }
    FetchWhitData() {
        fetch(this.url, {
            method: 'POST',
            body: JSON.stringify(this.data),
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(res => res.json()).
            then(responsive =>  responsive);
    }
}

--Luego llamo la clase creada de la siguiente manera

window.addEventListener('load', () => {
    document.getElementById('AddDesp').addEventListener('click', () => {
        
       const Datos = new loadFetch('../controlador/accion',null);
       
       const resultado = Datos.FetchNotData();
       
       console.log(resultado);//aqui obtengo por consola un undefined

        $('#modal-Add-Desp').modal('show');
    });
});

lo que trato de hacer con resultado es obtener el responsive y poder llenar los componentes que necesito.

espero puedan ayudarme.

saludos

2 respuestas 2

1

dejo como evidencia la respuesta. El problema ocurría debido a que cuando hacia click en el botón que ejecutaba la función fetchNotData. Esta se quedaba esperando resolver la promesa y como el evento click se desencadenaba inmediatamente, la función ya mencionada retornada nada, osea undefined

la solucion fue retornar una nueva promesa y en el evento click asignarle la propiedad asycn ademas de agregar la palabra await para esperar que la promesa se resolviera y retornara la data correspondiente.

Saludos cordiales.

class LoadFetch {
    constructor(Url, Data){
        this.url = Url;
        this.data = Data;
    }

    FetchNotData() {
        return new Promise(resolve => {
            return resolve(
                fetch(this.url, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res => res.json()).then(json => {
                    return json;
                })
            );
        });
    }

    FetchWhitData() {
        return new Promise(resolve => {
            return resolve(
                fetch(this.url, {
                    method: 'POST',
                    body: JSON.stringify(this.data),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res => res.json()).then(responsive => {
                        return responsive;
                })
            );
        });
    }
}

window.addEventListener('load', () => {
    document.getElementById('AddDesp').addEventListener('click', async ()  => {
        const Fetch = new LoadFetch('../WIPS/Cargar_Datos_Despacho_Sucursal', null);
        const resultado =  await Fetch.FetchNotData();

        console.log(resultado);

        const selectGrua = new LoadSelect('GRUA');
        const selectPartida = new LoadSelect('DESDE');
        const selectDestino = new LoadSelect('HACIA');
        const selectOrdenes = new LoadSelect('COD_ORDEN');
        selectGrua.createFileDefect(0, 'Seleccione una grua');
        selectPartida.createFileDefect(0, 'Seleccione un punto de partida');
        selectDestino.createFileDefect(0, 'Seleccione un punto de partida');
        selectOrdenes.createFileDefect(0, 'Seleccione un punto de partida');

        for (var i = 0; i < resultado[0].length; i++) {
            const Texto = `Patente: ${resultado[0][i].PATENTE} / Capacidad: ${resultado[0][i].CAPACIDAD}`;
            selectGrua.createSelect(resultado[0][i].ID_GRUA, Texto);
        }

        selectPartida.createSelect(resultado[2].COD_TIPO_UBICACION, resultado[2].TALLER);

        $('#modal-Add-Desp').modal('show');
    });
});

0

Solo cambiale el nombre

Amigo esta mal el nombre de la clase

const Datos = new loadFetch('../controlador/accion',null);

es LoadFetch

const Datos = new LoadFetch('../controlador/accion',null);
4
  • fue un problema de redacción mio, en si no era el nombre el problema.
    – luciano
    el 6 ago. 2019 a las 5:08
  • dejare como evidencia la solucion
    – luciano
    el 6 ago. 2019 a las 5:08
  • La solucion cual es? el 6 ago. 2019 a las 13:33
  • ya publique las respuesta amigo, trate de explicarla lo mejor posible
    – luciano
    el 6 ago. 2019 a las 15:06

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.