Having issues with async/await functionality within Vue 3's composable functions

Question

Having issues with async/await functionality within Vue 3's composable functions

Within my project, I implemented a function that handles file downloads. This function, onDownload, is triggered when the download button is clicked:

import {useOnDownload} from "../../use/useOnDownload"

setup() {

    ...

    const loading = ref(null)
    onDownload = async (id) => {
        loading.value = id
        await useOnDownload(id)
        loading.value = null
    }
    
    return {loading, onDownload}
}

To optimize code reusability, I centralized the API-related logic by creating a separate file named useOnDownload.js. This allows other components to utilize the same functionality.

export async function useOnDownload(id) {
    // make api call to server using axios
}

The issue I encountered is needing to properly handle the asynchronous nature of the useOnDownload function in order for the loader to function correctly.

javascript vue.js vuejs3

Answer 1

Answer №1

Learn how to create asynchronous composable functions using the async/await syntax

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 { // place your reactive data here };
}


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

For more information, check out this article

Answer 2

Learn how to create asynchronous composable functions using the async/await syntax

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 { // place your reactive data here };
}


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

For more information, check out this article

Answer 3

Answer №2

For the await keyword to work within onDownload, it is necessary for it to be asynchronous

Answer 4

For the await keyword to work within onDownload, it is necessary for it to be asynchronous

Answer 5

Answer №3

Your onDownlaod function includes the await keyword, even though it is not asynchronous. The following adjustment should be made to ensure proper functionality:

   // Ensure to include the following line
   onDownload = async(id) => {
    loading.value = id;
    await useOnDownload(id);
    loading.value = null;
}

Answer 6

Your onDownlaod function includes the await keyword, even though it is not asynchronous. The following adjustment should be made to ensure proper functionality:

   // Ensure to include the following line
   onDownload = async(id) => {
    loading.value = id;
    await useOnDownload(id);
    loading.value = null;
}

Answer 7

Answer №4

I found an alternative solution without using async and await...

By passing the reference object loader as a function parameter (which is optional), I was able to manage it from there...

export function useOnDownload(id, loader) {
   if(loader !== undefined) {
     loader.value = id
   }
   axios.post('/api/download', {id: id}, {
      responseType: 'blob'
   }).then(response => {
     // handling the response
     ...
     if(loader !== undefined) {
       loader.value = null
     }
   }).catch(error => {
     // handling the error
     ...
     if(loader !== undefined) {
       loader.value = null
     }
   })
}

Answer 8

I found an alternative solution without using async and await...

By passing the reference object loader as a function parameter (which is optional), I was able to manage it from there...

export function useOnDownload(id, loader) {
   if(loader !== undefined) {
     loader.value = id
   }
   axios.post('/api/download', {id: id}, {
      responseType: 'blob'
   }).then(response => {
     // handling the response
     ...
     if(loader !== undefined) {
       loader.value = null
     }
   }).catch(error => {
     // handling the error
     ...
     if(loader !== undefined) {
       loader.value = null
     }
   })
}

Having issues with async/await functionality within Vue 3's composable functions

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

ways to run php script based on screen resolution or size

Navigating from production lines to the angular directive - what's the best route?

Looking for a solution in Javascript and HTML to locate a main named window or tab and bring it to the front without loading a new URL into it

Having trouble retrieving coordinates from the ajax request and passing them to the Google Maps script

Unlike other templating engines, EJS does not automatically escape characters

The Springboot endpoint was successfully submitted through a fetch request, leading to a redirection to

Display XML data from a service in a sleek panel using SAPIU5/Javascript

Verify if a checkbox is selected upon loading the page

Updating a route in Next.js? Make sure to remove the classList as you

Tips for utilizing the .ready() function within the .load() method

Is Three.js deprecating the setHSL() function?

Guide to selectively hovering over a single object with raycasting

Code for jQuery is found in a separate file

Vue JS encounters an HTTP 500 Internal Server Error when communicating with the

Monitor Changes with Grunt: Be Prepared for Some Waiting!

Tips on transferring dynamically generated results to a user-friendly print window

Rendering data in React using the array indexRendering data in React

To avoid loading a CSS and JS file on a specific Rails controller, follow these steps:

Is a function repeatedly invoked?

We have successfully implemented version x3 validation using Netlify forms