Как перенести ошибку useAsync + на nuxt-bridge (useAsyncData недоступен)

Question

Я пытаюсь перенести приложение nuxt 2 на nuxt-bridge.

В этом приложении я часто извлекаю данные из API на основе параметров URL интерфейса. Вот так (упрощенно):

        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верно. Другой вариант — пока не использовать Composition 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>