SvelteKit中导航被#await请求阻塞，如何实现即时跳转？

数据老陈

2026-6-22

问题描述

我有一个异步加载数据并展示的组件，组件内设有跳转至其他页面的按钮。但点击按钮后，导航需等待所有#await请求完成才会执行，我希望用户点击后立即跳转，无需等待旧页面的所有数据加载完成。以下是我的代码大致实现：

<script lang="ts">
  import { goto } from '$app/navigation';

  let slowRequest = getSlowData();
</script>

<div class="flex flex-col">
  {#await slowRequest}
    Loading...
  {:then result}
    result
  {/await}
  <button onclick={() => goto("/some/other/page")}>
    Navigate
  </button>
</div>

点击按钮后我必须等待请求完成才会被重定向，有没有办法无需等待响应直接跳转到新页面？

解决方案

在SvelteKit中，默认goto会等待当前页面所有待处理异步操作完成后再导航，你可以通过以下两种方式实现立即跳转：

最简方案：修改goto配置参数
使用goto的第二个参数，设置{ cancelPending: true }，它会自动取消当前页面所有未完成的请求，直接触发导航：
```
<button onclick={() => goto("/some/other/page", { cancelPending: true })}>
  Navigate
</button>
```

精细控制：手动取消特定请求
如果只需要取消指定的慢请求，可借助AbortController实现：

<script lang="ts">
  import { goto } from '$app/navigation';

  const controller = new AbortController();
  // 假设getSlowData支持接收AbortSignal参数
  let slowRequest = getSlowData(controller.signal);

  const handleNavigate = async () => {
    controller.abort(); // 主动取消慢请求
    await goto("/some/other/page");
  };
</script>

<div class="flex flex-col">
  {#await slowRequest}
    Loading...
  {:then result}
    result
  {/await}
  <button onclick={handleNavigate}>
    Navigate
  </button>
</div>

第一种方案更简洁，适合大多数场景；第二种方案适合需要精准控制取消范围的场景。