Lo siento por la pregunta de novato, pero simplemente me di por vencido. Tengo el siguiente código que crea una solicitud POST a la parte BE de la aplicación: el usuario proporciona la entrada ( productCodes ) y presiona el botón Enviar. Esa parte funciona bien, Vue envía una solicitud a BE, pero en la respuesta, FE debería haber recibido JSON con el resultado: { id: 1234 }
¿Cómo obtengo esta respuesta y la muestro dentro de la aplicación? Tengo a continuación:
imports.js
const createProductsRequest = (self, products) => { const jwtToken = self.$store.state.idToken; const payload = JSON.stringify({ product_codes: products['product_codes'].split(',') }) return axios .post(`/api/v1/imports/products/`, payload,{ headers: { Authorization: `Bearer ${jwtToken}`, 'Content-Type': 'application/json', 'Accept': 'application/json' } }) .then(response => response.data) }; export { createProductsRequest }; sync_product.vue
<script> import { createProductsRequest } from '../../api/imports' import ModalController from '../general/modal_controller' export default { name: 'BackboneSyncProducts', data() { return { styleCodes: [], } }, computed: { productsToSyncAmount () { return this.styleCodes.length }, }, methods: { async syncProducts() { let confirmationText = `Do you want to ${this.productsToSyncAmount} sync products?` if (this.productsToSyncAmount === 0) { ModalController.showToast('', 'Type product codes for sync first, please!', 'warning') } else if (await ModalController.showConfirmation('Confirmation', confirmationText)) { try { ModalController.showLoader() await createProductsRequest(this, this.styleCodes) const successMessage = `${this.productsToSyncAmount} products have been queued for sync` await ModalController.showToast('', successMessage) } catch (data) { const errorMessage = `Error occurred during queueing products to sync - ` ModalController.showToast('', errorMessage + data?.message, 'error') } finally { this.styleCodes = [] ModalController.hideLoader() } } }, } } </script>Eso es todo lo que tengo.
En lugar de llamar a su solicitud sin obtener el valor de retorno:
await createProductsRequest(this, this.styleCodes)Puede obtener el valor de retorno que es el resultado de la solicitud:
const data = await createProductsRequest(this, this.styleCodes) Al hacer eso, los datos deben contener el resultado de la solicitud, como mencionaste { id: 1234 } .
--
Si desea utilizar este resultado en su componente, puede crear un valor reactivo en data()
data() { return { styleCodes: [], data: null } },Y almacenar el resultado de esta manera:
this.data = await createProductsRequest(this, this.styleCodes)Con eso puedes mostrarlo en tu plantilla, por ejemplo:
<template> <!-- There is a v-if because before doing the request, data is null --> <div v-if="data">{{ data.id }}</div> </template>