如何在自訂掛鉤內建立 useFetch 的副本？

Question

我正在嘗試創建一個可多次使用的鉤子，但我得到的行為不是我期望的

/composables/fetch.ts

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

  console.log(url, options);

  return new Promise(async (resolve, reject) => {
    const response = await useFetch(API_PREFIX url, {
      ...options,
      baseURL: API_BASE_URL,
      initialCache: false,
      async onResponse({ request, response, options }) {
        console.log('[fetch response]', response);
      },
      async onResponseError({ request, response, options }) {
        console.log('[fetch response error]');
      },
    });
    resolve(response);
  });

只觸發第一個請求

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

const { data: response } = await useFetchWithErrorHandler(`page-2`, {
    pick: ['data'],
});

Answer 1

useFetch 使用快取來避免多個相同的請求。

如果您在選項中設定initialCache: false，則可以停用緩存，例如

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