l'attente asynchrone ne fonctionne pas dans la fonction composable vue 3

Question

Dans mon projet, j'ai une fonction pour télécharger un fichier. Lorsque le bouton est cliqué, la fonction onDownload sera appelée : import{useOnDownload}from"../../use/useOnDownload"setup(){...constloading=ref(null)onDownload=(id)=>{ chargement. value=idawaituseOnDownload(id)loadi

P粉071559609 · Answer

Voici comment créer une fonction composable asynchrone à l'aide de la syntaxe d'attente asynchrone

export default function useOnDownload() {
  const isLoading = ref(true);

  const onDownload = async () => {
    isLoading.value = true;
    try {
      const { data } = await axios.post('/api/download', {id: id}, 
     {responseType: 'blob'})
        // handle the response

    } catch (error) {
      console.log(error);
    } finally {
      isLoading.value = false;
    }
  };
   // invoke the function
  onDownload();

  return { // return your reactive data here };
}


import useOnDownload from "../../use/useOnDownload"
// no await in setup script or function 
const { reactiveDataReturned } = useOnDownload();

Cliquez icipour plus d'informations

P粉764003519 · Answer

J'ai réussi à résoudre une autre méthode sans async et attendre...

Je passe le chargeur d'objet de référence à l'argument de la fonction (en option) et je le gère à partir de là...

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
     }
   })
}