1

Estoy tratando de hacer una petición XMLHttpRequest a una api, para eso cree la clase products cuyo constructor recibe la url, el metodo getSingle product hace la petición sin problema, posteriormente en otro archivo llamo esta clase y quiero obtener la data de la petición, pero no se como retornar esa data de la clase.

Como puedo hacer para que el el método getSingleproduct de la clase Products me retorne la información de la consulta. (por regla general no puedo usar Fetch api este proyecto)

Gracias por la ayuda

export class Products{
    
        constructor(url){
            this.url = url
        }
    
        getSingleProduct(){
            const request = new XMLHttpRequest();
            request.open("GET", this.url, true);
            request.onreadystatechange = function() {
                if(this.readyState === XMLHttpRequest.DONE && this.status === 200){
                    let ansWear = this.responseText;
                    if(ansWear){
                        console.log(ansWear);
                        return ansWear //No retorna nada
                    }
                  
                }
            }
            request.send();
        }
    }




//Lamando la clase

require('./index.css');
import {Products} from '../app/Products';

const products = new Products('https://fakestoreapi.com/products/1');

const fetchProducts = (products) => {
    const singleProduct = products.getSingleProduct();
    if(singleProduct){
        console.log("===========>", singleProduct)
    }
}

//Cuand cargue el dom
document.addEventListener('DOMcontentLoader', fetchProducts(products))

1 respuesta 1

1

Ya que no puedes usar Fetch API, podemos usar un método nativo. Suponiendo que puedes usar Promesas, haremos el proceso de la petición usando promesas y llamaremos al método "continuar", después de que la petición termine de ejecutarse.

Sin embargo, como sabrás, para usar este método se debe usar un callback en la promesa como método "continuar", pero para solucionar esto podemos usar async/await.

Quedando algo así

class Products {
    constructor(url) {
        this.url = url;
    }
    getSingleProduct() {
        return new Promise((resolve, reject) => {
            const request = new XMLHttpRequest();
            request.open("GET", this.url, true);
            request.onreadystatechange = function() {
                if (request.status === 200) {
                    let ansWear = request.responseText;
                    if (ansWear) {
                        resolve(ansWear);
                    }
                } else {
                    reject();
                }
            }
            request.send();
        });
    }
}

Ahora, pudes usar la clase con await. De esta manera

const response = await new Products("http://localhost/").getSingleProduct()

Básicamente estamos esperando a que una petición termine de ejecutarse y esto nos devolverá el resultado, ya que si no usamos await, solo nos devolverá la promesa.

Si nos devuelve la promesa, puedes usar los métodos then/catch o proveer una función callback a la función que se ejecutará cuando la petición termine ejecutarse.

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.