Svelte如何在显示加载器时延迟API响应？

你可以通过在API请求流程中添加延迟逻辑，确保加载器至少显示1-2秒，避免请求过快导致加载器一闪而过的问题。下面是两种可行的修改方案：

方案一：强制等待固定时长（不管API请求耗时） #

这种方式会让API请求和延迟等待同时进行，只有当两者都完成后才更新store，保证加载器至少显示指定时长（比如1.5秒）：

修改store.js中的getData函数：

export function getData(url) {
    // 定义延迟函数
    const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
    
    const load = async () => {
        // 同时发起API请求和延迟等待
        const [response] = await Promise.all([
            fetch(url),
            sleep(1500) // 这里设置1.5秒延迟，可按需调整
        ]);
        const data = await response.json();
        
        provider.set(data.provider);
        store.set(data);
    }
    
    load();
    return store;
}

方案二：仅在API请求过快时补延迟 #

如果API请求本身耗时已经超过1-2秒，就不用额外等待；只有当请求耗时不足时，才补充剩余时间，兼顾体验和效率：

修改store.js中的getData函数：

export function getData(url) {
    const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
    
    const load = async () => {
        const startTime = Date.now();
        
        // 发起API请求
        const response = await fetch(url);
        const data = await response.json();
        
        // 计算已耗时，补够剩余延迟时间
        const elapsedTime = Date.now() - startTime;
        const remainingDelay = Math.max(1500 - elapsedTime, 0); // 确保延迟不小于0
        await sleep(remainingDelay);
        
        provider.set(data.provider);
        store.set(data);
    }
    
    load();
    return store;
}

两种方案都能实现你的需求，你可以根据实际场景选择：

• 若希望加载器稳定显示固定时长，选方案一；
• 若想兼顾请求效率，只在请求过快时补延迟，选方案二。

内容的提问来源于stack exchange，提问作者Northify