I'm currently working on a simple app and utilizing mock-json-server to mimic http requests.
Within my project, I have defined a function designed to retrieve the necessary information:
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
This function is then called within the setup function of my component :
<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>
Although I can see the data in console.log(scoringPass.value) inside the function, the load() function within the setup section does not seem to work and I am unable to determine why. It seems to be called, yet I am unable to retrieve the data.
When I execute console.log(load()), the output is as follows:
Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined
Any assistance would be greatly appreciated. Thanks.