Vue 3 在设置中使用函数

Question

我正在做一个简单的应用程序，我正在使用 mock-json-server 来模拟 http 请求。

我已经定义了一个函数来获取我需要的信息：

import { ref } from 'vue'

const getScores = () => {
const scoringPass = ref([])
const error = ref(null)

const load = async () => {
  try {
    let data = await fetch('http://localhost:8000/scores', {
    method: 'get',
    headers: {
        'content-type': 'application/json'
    }})
    if (!data.ok) {
          throw Error('no data available')
    }
    scoringPass.value = await data.json()
    console.log(scoringPass.value)
  } catch (err) {
    error.value = err.message
    console.log(error.value)
  }
}
return { scoringPass, error, load }
}

export default getScores

我在组件的设置函数中调用它：

  <script lang="ts">
    import { defineComponent } from 'vue'
    import Pass from '@/components/Pass.vue'
    import getScores from '../composables/getScores.js'

    export default defineComponent({
    setup() {
      const numeroDossier = '25020230955000004'
      const { scoringPass, error, load } = getScores()

      load()
      return { numeroDossier, scoringPass, error }
    },
    components: {
      Pass,
     },
    })
    </script>

在console.log(scoringPass.value)函数中，我可以看到数据。但是设置部分的 load() 函数不起作用，我不知道为什么。虽然调用了，但是获取不到数据

当我执行 console.log(load()) 时，我得到：

Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined

感谢任何帮助。干杯。

Answer 1

load() 是 async, so its return value is a Promise。您必须 await 调用才能获取基础数据。但是，load() 实际上并没有 return 任何东西，因此您仍然看不到任何数据。如果你想让 load() 提供 scoringPass 的初始值，load() 应该 return 那：

const load = async () => {
  try {
    ⋮
    return scoringPass.value
  } catch (err) {
    ⋮
    return null
  }
}

要获得 load() 的结果，您可以将调用包装在 async 函数中以 await 调用；或链接一个 .then() 回调：

export default defineComponent({
  setup() {
    ⋮
    const logLoadResults = async () => console.log(await load())
    logLoadResults()

    // or
    load().then(results => console.log(results))
  }
})

不要mark setup() as async，因为那样会使您的组件成为异步组件，需要父组件中的<Suspense> 才能呈现它。

Vue 3 在设置中使用函数

Vue 3 using function inside setup

javascript

vue.js

vue-component

vue-composition-api