SvelteKit中fetch请求阻塞页面导航的解决方法问询

在SvelteKit项目里，当页面发起长耗时的fetch请求时，点击<a>标签跳转页面会被阻塞，必须等请求完成才能继续导航。你之前尝试用AbortController但方案失效，核心问题是用法错误加上没适配SvelteKit的导航逻辑，下面是可行的解决办法：

方案1：修正AbortController用法 #

你之前的代码错误调用了controller.close()，AbortController的正确终止方法是controller.abort()。修正后就能在点击链接时立即终止请求，让导航不再等待：

<script>
    const controller = new AbortController();

    let longFetch = fetch('/data.json', {
        signal: controller.signal
    });
</script>

<a href="/some-page" on:click={() => controller.abort()}>Some Page</a>

方案2：全局处理多请求场景 #

如果页面中有多个需要终止的请求，用SvelteKit的beforeNavigate钩子可以在导航开始时统一终止所有未完成请求，不用逐个绑定点击事件：

<script>
    import { beforeNavigate } from '$app/navigation';

    // 存储所有请求的控制器
    const abortControllers = new Set();

    // 封装带自动终止能力的fetch函数
    function abortableFetch(url, options = {}) {
        const controller = new AbortController();
        abortControllers.add(controller);
        
        const request = fetch(url, {
            ...options,
            signal: controller.signal
        });

        // 请求完成后移除控制器，避免内存泄漏
        request.finally(() => abortControllers.delete(controller));
        return request;
    }

    // 发起长耗时请求
    let longFetch = abortableFetch('/data.json');

    // 导航触发前终止所有请求
    beforeNavigate(() => {
        abortControllers.forEach(controller => controller.abort());
    });
</script>

<a href="/some-page">Some Page</a>

失效原因说明 #

1. 之前调用了不存在的controller.close()方法，导致请求根本没被终止，SvelteKit仍在等待请求完成；
2. SvelteKit的客户端导航默认会等待页面中所有未完成的Promise（包括组件内的fetch），只有当这些Promise被终止或完成后，导航流程才会继续。正确调用abort()会让fetch抛出AbortError，使Promise进入rejected状态，SvelteKit就不会再等待它。

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