En mi proyecto tengo una función para descargar los archivos. Al hacer clic en el botón, se llamará a la función onDownload :
import {useOnDownload} from "../../use/useOnDownload" setup() { ... const loading = ref(null) onDownload = (id) => { loading.value = id await useOnDownload(id) loading.value = null } return {loading, onDownload} } Refactoricé el código para api en una llamada de archivo useOnDownload.js porque el mismo código también se usa en otros componentes.
export async function useOnDownload(id) { // make api call to server with axios }¿Que hice mal? Necesito esperar a que la función useOnDownload... para que el cargador funcione.
Me las arreglé para resolver de otra manera sin async y esperar ...
Pasé el cargador de objetos de referencia al parámetro de función (como opcional) y lo maneje desde allí...
export function useOnDownload(id, loader) { if(loader !== undefined) { loader.value = id } axios.post('/api/download', {id: id}, { responseType: 'blob' }).then(response => { // handle the response ... if(loader !== undefined) { loader.value = null } }).catch(error => { // handle the error ... if(loader !== undefined) { loader.value = null } }) }onDownload debe ser asíncrono para usar await dentro de él
Está utilizando la palabra clave await en su función onDownlaod, pero la función no es asíncrona. Así es como debe actualizarlo.
// next line important onDownload = async(id) => { loading.value = id await useOnDownload(id) loading.value = null }