如何在自定义挂钩内创建 useFetch 的副本？
<p>我正在尝试创建一个可多次使用的钩子，但我得到的行为不是我期望的</p>
<p>/composables/fetch.ts</p>
<pre class="brush:js;toolbar:false;">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);
});
</pre>
<p>仅触发第一个请求</p>
<pre class="brush:js;toolbar:false;">const { data: response } = await useFetchWithErrorHandler(`page-1`, {
pick: ['data'],
});
const { data: response } = await useFetchWithErrorHandler(`page-2`, {
pick: ['data'],
});
</pre></p>
1
960
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
useFetch使用缓存来避免多个相同的请求。如果您在选项中设置
initialCache: false，则可以禁用缓存，例如useFetch(API_PREFIX + url, { ...options, initialCache: false, } )