Wie erstelle ich eine Kopie von useFetch in einem benutzerdefinierten Hook?

Question

Ich versuche, einen Hook zu erstellen, der mehrfach verwendet werden kann, aber das Verhalten, das ich erhalte, entspricht nicht meinen Erwartungen

/composables/fetch.ts

export const useFetchWithErrorHandler = async (url: string, options?: FetchOptions) =>
  const route = useRoute();
  const { API_BASE_URL, API_PREFIX } = useRuntimeConfig();

  console.log(URL, Optionen);

  return new Promise(async (resolve, ablehne) => {
    const Antwort = Warten auf useFetch(API_PREFIX + URL, {
      ...Optionen,
      BasisURL: API_BASE_URL,
      initialCache: false,
      async onResponse({ Anfrage, Antwort, Optionen }) {
        console.log('[Antwort abrufen]', Antwort);
      },
      async onResponseError({ Anfrage, Antwort, Optionen }) {
        console.log('[Abrufantwortfehler]');
      },
    });
    lösen(Antwort);
  });

Löst nur die erste Anfrage

const { data: Response } = waiting useFetchWithErrorHandler(`page-1`, {
    pick: ['data'],
});

const { Daten: Antwort } = Warten auf useFetchWithErrorHandler(`page-2`, {
    pick: ['data'],
});

Answer 1

useFetch 使用缓存来避免多个相同的请求。

如果您在选项中设置initialCache: false，则可以禁用缓存，例如

useFetch(API_PREFIX + url, {
    ...options,
    initialCache: false,
  }
)