claseWooCommerceProductos.js
import { WooComRestApi } from "~/plugins/classWooCommerceOrigin.js"; export class WooCommerceProducts { constructor() { } //-- A method -- async get() { const getproducts = await WooComRestApi.get("products").then((response) => { return response.data }).catch((error) => { return "WooCommerceProducts get failre" }) return getproducts } //or //-- B method -- get() { const getproducts = WooComRestApi.get("products").then((response) => { return response.data }).catch((error) => { return "WooCommerceProducts get failre" }) return getproducts } }productos.vue
// -- A method -- methods: { getProducts() { const WooComProducts = new WooCommerceProducts() WooComProducts.get().then((response) => { this.products = response }).catch((error) => { throw new Error(error) }) } }, or // -- B method -- methods: { async getProducts() { const WooComProducts = new WooCommerceProducts() await WooComProducts.get().then((response) => { this.products = response }).catch((error) => { throw new Error(error) }) } },chicos una pregunta rápida en dos partes
Tengo una clase js que llama desde el backend y recupera los datos de los productos, ambos códigos funcionan, uno es asíncrono y espero en html vue, el otro es asíncrono y espero en la clase js, entonces, ¿cuál hizo bien? ¿Alguien puede decirme qué dosis diferente hace?
¿Cómo devuelvo los datos o el error a la función getProducts y obtengo el mismo resultado que la clase? si falla, devuelve "wooCommerceProducts: get failure" y volverá a mis funciones de error de captura de getProducts.
aprendiendo más 😄 agradecido por compartir tus consejos. ¿Cómo implementarías si fueras tú?
Lo que hay que recordar es que async/await es simplemente una sintaxis más moderna para promise .then() . No tiene sentido mezclarlos.
¿Cómo devuelvo los datos o el error a la función getProducts?
Devuelve los datos explícitamente en la sintaxis asíncrona (dentro de un try/catch ). En el estilo antiguo de promesa, devuelve la promesa.
//-- A method -- async get() { // note that no "then" appears here try { const response = await WooComRestApi.get("products"); return response.data; // note the return } catch(err) { console.log("WooCommerceProducts failure"); throw err; } } //or, using the older syntax //-- B method -- get() { return WooComRestApi.get("products").then((response) => { // note the return return response.data; }).catch((error) => { console.log("WooCommerceProducts get failure"); throw error; }); }Tengo una clase js que llama desde el backend y recupera los datos de los productos, ambos códigos funcionan, uno es asíncrono y espero en html vue, el otro es asíncrono y espero en la clase js, entonces, ¿cuál hizo bien?
El mismo patrón que antes "Un método" es correcto porque no necesita retorno. Para el "método B", ha elegido el nuevo estilo, así que manténgalo...
// -- B method -- methods: { async getProducts() { const WooComProducts = new WooCommerceProducts() try { this.products = await WooComProducts.get(); } catch(error) { // handle error } } },