异步等待在可组合函数 vue 3 中不起作用

Question

在我的项目中，我有一个下载文件的功能。当点击按钮时，函数 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}
}

我在文件 useOnDownload.js 调用中重构了 api 的代码，因为其他组件中也使用了相同的代码。

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

我做错了什么？我需要等待函数 useOnDownload ... 才能使加载器工作。

Answer 1

onDownload 必须异步才能在其中使用 await

Answer 2

您在 onDownlaod 函数中使用了 await 关键字，但该函数不是异步的。这是您应该如何更新它。

   // next line important
   onDownload = async(id) => {
    loading.value = id
    await useOnDownload(id)
    loading.value = null
}

Answer 3

我设法用另一种方法解决了没有异步和等待...

我将引用对象加载器传递给函数参数（可选）并从那里处理...

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

异步等待在可组合函数 vue 3 中不起作用

async await not working in composable function vue 3

javascript

vue.js

vuejs3