Estoy ejecutando una aplicación frontend a través de VueJS en mi máquina local que consulta GraphQL. Una de las consultas es una descarga que funciona bien, sin embargo, creo que hay un problema con mi código javascript. Cada vez que hago clic en el botón de descarga, se activa la función de descarga, es decir, @click="download" . Las funciones de descarga son las siguientes (la de abajo se ejecuta primero):

 sleep(ms) { return new Promise((resolve) => { setTimeout(resolve, ms); }); downloadFile() { const vm = this; vm.count ++; axios.post("http://0.0.0.0/graphql", { query: `mutation download_doc($object_path:String!) { download_doc(object_path:$object_path) { file_name encoded_file } } `, variables : { object_path: this.object_path } }) .then(response => vm.file_info = response.data.data.download_doc.encoded_file) .then(function() { console.log(vm.file_info);}) }, downloadBase64File(base64Data, fileName) { const linkSource = `data:text/plain;base64,${base64Data}`; const downloadLink = document.createElement("a"); downloadLink.href = linkSource; downloadLink.download = fileName; downloadLink.click(); }, async download() { this.downloadFile(); await this.sleep(1000); this.downloadBase64File(this.file_info, this.object_path); await this.sleep(1000); if (this.count >= 2) { this.clearForm() }

Sin embargo, en el primer clic, aparece un error de red y solo se descarga en el segundo clic. A veces, el tercer clic para archivos particularmente grandes, y el segundo clic también resulta en un error de red fallido .

Soy relativamente nuevo en el uso de javascript, así que no estoy seguro de si la solución es fácil. Alguien sabe cómo resolver este problema?