vue3中的异步请求问题

Question

    var bestData = {}
    //获取点击量最高广告
    const getBestClick = async () => {
        let result = await advertiseBestClickService()

        if (result.code === 0) {
            bestData = result.data
            console.log(bestData)
        } else {
            ElMessage({
                message: '系统异常，请联系管理员',
                type: 'warning',
            })
        }
    }
    await getBestClick()
    console.log(bestData)

    onMounted(async () => {

await getBestClick()使用await的话下面的onMounted函数加载不了，
把await去掉的话bestData为空。

Answer 1

花果山猿猴队长 下午好🌅🌅🌅
本答案参考ChatGPT-3.5

在Vue 3中的异步请求问题中，你遇到了一个问题，即使用await关键字获取异步请求结果后，下方的onMounted函数无法加载，而去掉await关键字后，bestData为空。

解决这个问题的关键在于理解JavaScript中的异步操作和Vue 3中的生命周期函数。

• 异步操作：使用await关键字可以让程序等待异步请求的结果返回，确保后续代码的执行顺序。然而，由于JavaScript是单线程执行的，当程序执行到await语句时，会暂停执行，等待异步请求的结果返回。这样的话，如果异步请求需要一些时间才能返回结果，就会阻塞后续代码的执行。

• Vue 3中的生命周期函数：在Vue组件中，onMounted是一个生命周期函数，它会在组件挂载到DOM上后执行。因此，你希望在onMounted函数中执行一些操作，可能需要等待异步请求的结果返回后再执行。

解决方案：

1. 在onMounted函数中调用getBestClick函数，并且不使用await关键字。

onMounted(() => {
    getBestClick()
})

这样的话，onMounted函数会在异步请求开始后立即执行，而不必等待异步请求的结果返回。这就解决了异步请求结果返回耗时较长而导致onMounted函数无法加载的问题。

1. 在getBestClick函数中，使用await关键字，并且将bestData作为返回值。

const getBestClick = async () => {
    let result = await advertiseBestClickService()

    if (result.code === 0) {
        bestData = result.data
        console.log(bestData)
        return bestData
    } else {
        ElMessage({
            message: '系统异常，请联系管理员',
            type: 'warning',
        })
    }
}

这样的话，getBestClick函数会返回bestData值，可以将其作为参数传递给onMounted函数。

onMounted(async () => {
    bestData = await getBestClick()
    console.log(bestData)
})

这样的话，onMounted函数会等待getBestClick函数执行完毕并返回bestData值后再执行，确保获取到了正确的结果。

最终的代码如下：

var bestData = {}

const getBestClick = async () => {
    let result = await advertiseBestClickService()

    if (result.code === 0) {
        bestData = result.data
        console.log(bestData)
        return bestData
    } else {
        ElMessage({
            message: '系统异常，请联系管理员',
            type: 'warning',
        })
    }
}

onMounted(async () => {
    bestData = await getBestClick()
    console.log(bestData)
})