Quiero ejecutar una función asíncrona después de que un formulario haya completado su envío. El formulario actualiza un carrito de compras y necesito tomar los productos del carrito después de agregarlos.
He intentado un millón de cosas y nada parece esperar hasta que el formulario se haya COMPLETADO antes de ejecutar mi código. No quiero usar ningún tipo de eventos de tiempo.
Aquí están las últimas dos versiones de código que tengo. Ambos hacen lo mismo y se ejecutan antes de que finalice el envío:
window.addEventListener( 'submit', () => vueFreshie.$options.components['fresh-credit'].options.methods.getCart(), false ) window.addEventListener("submit", async e => { await vueFreshie.$options.components['fresh-credit'].options.methods.getCart() }, false)este es el método Vue al que llamo, y lo he simplificado por ejemplo.
methods: { async getCart() { let response = await axios.get(`/cart.js`) debugger } }el método se llama bien, es demasiado pronto y el carro no se ha actualizado.
Aquí tienes: he usado un controlador de eventos onSubmit para escuchar el envío del formulario y axios para publicar explícitamente los datos en mi servidor. De esta manera, tengo más control sobre la solicitud de envío y puedo await a que se complete antes de continuar con la API de getCart .
new Vue({ el: "#app", data: () => { return { formData: { firstName: '', lastName: '' } } }, methods: { async onSubmit() { const {data} = await axios.post('https://jsonplaceholder.typicode.com/posts', this.formData); console.log('response from submitted request', data); await this.getCart(); }, async getCart() { console.log('safe to call the get cart API now'); const {data} = await axios.get('https://jsonplaceholder.typicode.com/posts'); console.log('response from cart api', data); } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <div id="app"> <form v-on:submit.prevent="onSubmit"> <input name="firstName" v-model="formData.firstName"><br/> <input name="lastName" v-model="formData.lastName"> <button type="submit">SUBMIT</button> </form> </div>