Estoy haciendo una aplicación simple y estoy usando mock-json-server para simular una solicitud http.
He definido una función para obtener la información que necesito:
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 getScoresY lo llamo en la función de configuración de mi componente:
<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>En console.log(scoringPass.value) en la función, puedo ver los datos. pero la función de carga () en la parte de configuración no funciona y no puedo entender por qué. Sin embargo, se llama, pero no puedo obtener los datos.
Cuando hago console.log(load()), obtengo:
Promise {<pending>} [[Prototype]]: Promise [[PromiseState]]: "fulfilled" [[PromiseResult]]: undefinedCualquier ayuda apreciada. Salud.
load() es async , por lo que su valor de retorno es una Promise . await la llamada para obtener los datos subyacentes. Sin embargo, load() en realidad no devuelve nada, por lo que aún no verá ningún dato. Si desea que load() proporcione el valor inicial de scoringPass , load() debería devolver eso:
const load = async () => { try { ⋮ return scoringPass.value } catch (err) { ⋮ return null } } Para obtener el resultado de load() , puede envolver la llamada en una función async para await la llamada; o .then() :
export default defineComponent({ setup() { ⋮ const logLoadResults = async () => console.log(await load()) logLoadResults() // or load().then(results => console.log(results)) } }) No marque setup() como async porque eso haría que su componente fuera un componente asíncrono , lo que requeriría un <Suspense> en un componente principal para representarlo.