Asynchrone Zusammensetzbarkeit von Nuxt 3
P粉309989673
P粉309989673 2023-11-02 16:59:05
0
1
620

Ich habe das folgende asynchrone Composable in Nuxt 3, aber es funktioniert nicht wie erwartet, da ich einen React-Hintergrund habe. Ich glaube, mir fehlt etwas.

Ich habe den folgenden Code in meinem Composable.

// useAsyncFoo.js export default () => { const foo = ref(null); someAsyncFn().then(value => foo.value = value); return foo; }

Dann verwende ich es auf meiner Seite so:

 ...

Ich hoffefoo获取承诺返回的值,但它始终是null.

Ist es in Nuxt 3 üblich, auf Composables zu warten? (await useAsyncFoo()) und als asynchrone Funktion exportieren? Habe ich etwas falsch gemacht?

P粉309989673
P粉309989673

Antworte allen (1)
P粉851401475

我花了一个下午的时间尝试将数据从可组合项传输到页面,但最终总是得到奇怪或未定义的数据。阅读这里的评论我终于明白了我错过了什么并设法做到了,所以谢谢!如果有帮助,这是我的文件。

(FetchWrapper 是我受此启发而制作的一个可组合项文章,因此我不必在每个请求上添加令牌,但它使用 Nuxt $fetch 方法。)

我的可组合项

export const useFoo = () => { const { fetchWrapper } = useFetchWrapper() const bar = ref([]) const getApiData = async () => { try { bar.value = await fetchWrapper .get(`${useRuntimeConfig().public.API_URL}/foobar`, null) } catch(error) { // } } return { bar, getApiData } }

我的页面

 
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!