如何在自定义挂钩内创建 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,
  }
)