Nuxt 3 中的巢狀 useFetch

Question

如何在 Nuxt 3 中完成巢狀抓取？ 我有兩個 API。第二個 API 必須根據第一個 API 傳回的值來觸發。

我嘗試了下面的程式碼片段，但它不起作用，因為 page.Id 在呼叫時是 null 。我知道第一個 API 傳回有效資料。所以我猜想在第一個 API 回傳結果之前會觸發第二個 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>

顯然這是一個簡單的嘗試，因為沒有檢查第一個 API 是否實際傳回任何資料。它甚至沒有等待響應。

在 Nuxt2 中，我會將第二個 API 呼叫放在 .then() 內，但對於這個新的 Composition API 設置，我有點無能為力。

Answer 1

一種解決方案是避免使用await。另外，使用引用來保存值。這將使您的 UI 和其他邏輯具有反應性。

sssccc

Answer 2

您可以觀看頁面，然後在頁面可用時執行API調用，您應該將paragraphs作為ref，然後分配解構的資料：

sssccc