如何在 Nuxt 3 中完成巢狀抓??? 我有兩個(gè) API。第二個(gè) API 必須根據(jù)第一個(gè) API 傳回的值來(lái)觸發(fā)。
我嘗試了下面的程式碼片段,但它不起作用,因?yàn)?page.Id
在呼叫時(shí)是 null
。我知道第一個(gè) API 傳回有效資料。所以我猜想在第一個(gè) API 回傳結(jié)果之前會(huì)觸發(fā)第二個(gè) API。
<script setup> const route = useRoute() const { data: page } = await useFetch(`/api/page/${route.params.slug}`) const { data: paragraphs } = await useFetch(`/api/page/${page.Id}/paragraphs`) </script>
顯然這是一個(gè)簡(jiǎn)單的嘗試,因?yàn)闆](méi)有檢查第一個(gè) API 是否實(shí)際傳回任何資料。它甚至沒(méi)有等待響應(yīng)。
在 Nuxt2 中,我會(huì)將第二個(gè) API 呼叫放在 .then()
內(nèi),但對(duì)於這個(gè)新的 Composition API 設(shè)置,我有點(diǎn)無(wú)能為力。
一種解決方案是避免使用await
。另外,使用引用來(lái)保存值。這將使您的 UI 和其他邏輯具有反應(yīng)性。
sssccc
您可以觀看頁(yè)面
,然後在頁(yè)面可用時(shí)執(zhí)行API調(diào)用,您應(yīng)該將paragraphs
作為ref
,然後分配解構(gòu)的資料:
sssccc