面试题：Qwik 中 fetch API 的性能优化

缓存处理

内存缓存：在客户端内存中存储请求结果。可以使用一个对象来模拟简单的缓存。
- 示例代码如下：

// 创建一个缓存对象
const cache = {};
async function fetchDataWithCache(url) {
    if (cache[url]) {
        return cache[url];
    }
    const response = await fetch(url);
    const data = await response.json();
    cache[url] = data;
    return data;
}

本地存储缓存：如果数据不需要实时更新，且希望在页面刷新或关闭后仍能使用缓存数据，可以使用 localStorage。
- 示例代码如下：

async function fetchDataWithLocalStorageCache(url) {
    const cachedData = localStorage.getItem(url);
    if (cachedData) {
        return JSON.parse(cachedData);
    }
    const response = await fetch(url);
    const data = await response.json();
    localStorage.setItem(url, JSON.stringify(data));
    return data;
}

控制请求频率

防抖（Debounce）：在一定时间内，如果多次触发相同请求，只执行最后一次。
- 示例代码如下：

function debounce(func, delay) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}
// 假设这里有一个根据输入值获取数据的函数
async function fetchDataByInput(input) {
    const url = `your - api - url?input=${input}`;
    const response = await fetch(url);
    const data = await response.json();
    return data;
}
const debouncedFetch = debounce(fetchDataByInput, 300);
// 调用防抖后的函数
debouncedFetch('some input');

节流（Throttle）：规定在一个单位时间内，只能触发一次请求。
- 示例代码如下：

function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}
// 假设这里有一个根据滚动事件获取数据的函数
async function fetchDataOnScroll() {
    const url = 'your - api - url';
    const response = await fetch(url);
    const data = await response.json();
    return data;
}
const throttledFetch = throttle(fetchDataOnScroll, 1000);
// 假设添加滚动事件监听器
window.addEventListener('scroll', throttledFetch);

在 Qwik 应用中使用时，可以将上述函数封装成自定义钩子（如果使用 Qwik 的 hooks 机制），方便在组件中复用。例如：

import { useMemo } from '@builder.io/qwik';

export const useFetchWithCache = () => {
    const cache = useMemo(() => ({}), []);
    return async function(url) {
        if (cache[url]) {
            return cache[url];
        }
        const response = await fetch(url);
        const data = await response.json();
        cache[url] = data;
        return data;
    };
};

然后在组件中使用：

import { component$, useFetchWithCache } from '@builder.io/qwik';

export default component$(() => {
    const fetchWithCache = useFetchWithCache();
    const fetchData = async () => {
        const data = await fetchWithCache('your - api - url');
        console.log(data);
    };
    return (
        <button onClick={fetchData}>Fetch Data</button>
    );
});

星途面试题库

面试题：Qwik 中 fetch API 的性能优化

知识考点

面试题答案

缓存处理

控制请求频率