如何將 useAsync + 錯誤遷移到 nuxt-bridge（useAsyncData 不可用）

Question

我正在嘗試將 nuxt 2 應用程序遷移到 nuxt-bridge。

在這個應用程序中，我經常根據前端的 URL 參數從 API 獲取數據。 像這樣（簡化）：

  setup() {
    const { $axios, error, params } = useContext()

    const foo = useAsync(async () => {
      try {
        return await $axios.$get(`...${params.value.foo}`)
      } catch () {
        error({ statusCode: 404, message: 'Not found' })
      }
    })

    return { foo }
  }

這個useAsyncData不可用的“微小”限制對我造成了很大的打擊。

如果我做對了，我將不得不改用useLazyAsyncData並在我的模板中處理掛起和錯誤狀態。 這意味着我必須用以下內容包裝我當前的所有模板：

<div v-if="pending">
... show something while loading ...
</div>
<div v-else-if="error">
... show error page - not even sure how to do this as my error page is based on a different layout ...
</div>
<div v-else>
... current template ...
</div>

這意味着：

• 我無法正確響應 HTTP 404 代碼。
• 當我最終搬到 nuxt3 時，我將不得不再次恢復所有這些。

那是對的嗎？ 有更好的方法嗎？

Answer 1

是的，您使用useLazyAsyncData提出的遷移路徑是正確的。 另一種選擇是不使用組合 API 並堅持 Nuxt 2 的asyncData 。

Answer 2

我也遇到了這個問題。 我通過創建<HttpError />組件解決了這個問題，如下所示

<script lang="ts" setup>
import { createError } from 'h3';

const { statusCode = 404, statusMessage = 'Not Found' } = defineProps<{
  statusCode: number;
  statusMessage: string;
}>();
throw createError({ statusCode, statusMessage });
</script>

並使用它

<script lang="ts" setup>
import HttpError from '~/components/HttpError';
const { data, error } = useLazyAsyncData(...);
</script>
<template>
  <div>
    <HttpError v-if="error" :status-code="404" />
    <div v-else>
      ...
    </div>
  </div>
</template>