缓存
TIP
为保证体验，请打开开发者工具，选择网络面板，观察网络请求状态。如果请求响应时间过短，可以调到低速3G模式延长响应时间。
useRequest具有内置的缓存功能，可用于在指定时间内存储请求结果，以便在后续请求中重复使用。这对于减少不必要的重复网络请求非常有用。
设置缓存时间
通过 cacheTime 选项来设置缓存的有效时间，以毫秒为单位。
const { result, loading, error, run } = useRequest(request, {
cacheTime: 3000,
});
监听缓存
通过传入 onCache 函数，可以在命中缓存时触发回调。
const onCacheStr = ref('');
const onCache = (result: IResult) => {
onCacheStr.value = `onCache triggered: ${JSON.stringify(result)}`;
};
const { result, loading, error, run } = useRequest(request, {
cacheTime: 3000,
onCache,
});
完整示例
result:
loading: false
error:
onCache:
<template>
<div class="demo-container">
<h3>result: <span>{{ result }}</span></h3>
<h3>loading: <span>{{ loading }}</span></h3>
<h3>error: <span>{{ error }}</span></h3>
<h3>onCache: <span>{{ onCacheStr }}</span></h3>
<button class="primary" @click="handleRun">run</button>
<button @click="reset">reset</button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { useRequest } from '@superarale/vue-use-request';
import { request, IParams, IResult, correctKey } from './request';
const onCacheStr = ref('');
const onCache = (result: IResult) => {
onCacheStr.value = `onCache triggered: ${JSON.stringify(result)}`;
};
const reset = () => {
result.value = null;
loading.value = false;
error.value = null;
onCacheStr.value = '';
};
const { result, loading, error, run } = useRequest(request, {
cacheTime: 3000,
onCache,
});
const handleRun = () => {
const params: IParams = {
key: correctKey,
};
run(params);
};
</script>
