En vuejs, estoy usando un archivo de ayuda con algunas funciones personalizadas que usaré en todas partes del proyecto.
Estaba refactorizando algunas promesas asíncronas en espera, pero parece que no puedo resolverlo.
Deseo llamar a fetchUserData(123), por ejemplo, y devolver los datos al método. Aunque la solicitud se realiza y tiene resultados válidos, la constante de datos de usuario no está definida.
¿Qué estoy haciendo mal?
component.vue: este se imprime, Uncaught (en promesa) TypeError: No se pueden leer las propiedades de undefined (leyendo 'entonces')
import { currentDateTime , fetchUserData } from '@/helpers/util.js'; export default { data () { return { userData: null, loaded: false } }, methods : { currentDateTime , fetchUserData , async setData () { const userData = await fetchUserData(123) userData.then(response => { console.log(response) // prints undefined this.loaded = true this.userData.name = response.data.name // other logic ... }) } }, created() { this.setData() } }componente.vue: este se imprime, indefinido
async setData () { const userData = await fetchUserData(123) console.log(userData ) }util.js
import axios from 'axios'; export function capitalizeFirstLetter(str) { return str.charAt(0).toUpperCase() + str.slice(1); } export function zeroPad(num, places) { return String(num).padStart(places, '0') } export function currentDateTime () { const current = new Date() const date = zeroPad ( current.getDate() , 2 ) + '/' + zeroPad( ( current.getMonth() + 1 ) , 2 ) + '/' + current.getFullYear() const time = zeroPad ( current.getHours() , 2 ) + ":" + zeroPad ( current.getMinutes() , 2 ) + ":" + zeroPad ( current.getSeconds() , 2 ) const dateTime = date +' '+ time return dateTime } export async function fetchUserData( id ) { await axios.get('/data-table/' + id ).then(response=> { console.log(response) // works return response }).catch(error => { console.log(error) }); }tienes algunos errores en tu código aquí están las soluciones:
componente.vue
import { currentDateTime , fetchUserData } from '@/helpers/util.js'; export default { data () { return { userData: null, loaded: false } }, methods : { currentDateTime , fetchUserData , async setData () { const { data } = await fetchUserData(123); this.loaded = true this.userData.name = data.name } }, created() { this.setData() } }util.js
import axios from 'axios'; export async function fetchUserData(id) { try { const response = await axios.get('/data-table/' + id); return response; } catch (e) { throw e; } }Alguna confusión sobre cómo funcionan las promesas, cambie su código a:
export function fetchUserData( id ) { return axios.get('/data-table/' + id ) }Luego, cuando lo usas, cambia para intentar atrapar mientras usas async/await
async setData () { try { const {data} = await this.fetchUserData(123) this.userData.name = data.name this.$nextTick(() => this.loaded = true) } catch (err) { // do something with err } }