获取请求在页面加载时和页面完成加载后触发两次

Question

以下是用于确认您的电子邮件地址的页面，我正在使用 fetch 将唯一令牌参数发送到 API，但实际情况是加载函数上的 fetch 请求被调用两次，即使它没有在控制台上显示响应更改的值。这是一个简单的步骤：

点击link
fetch 使用唯一令牌
API 回复确定或未找到（如果您已经确认您的电子邮件）

第三步是导致问题的原因，一旦页面加载它看起来像是在后台获取并显示成功消息直到加载完成然后显示的消息变为错误，当我检查 API 我看到两个请求第一次成功，下一个没有找到（验证用户后删除令牌未找到结果）

<script context="module" lang="ts">
    import type { Load } from '@sveltejs/kit';

    import { variables } from '$lib/variables';

    const { api } = variables;

    export const load: Load = async ({ fetch, page }) => {
        const res = await fetch(api + '/Newsletters/subscribers/validation/' + page.params.token);

        if (res.status === 200 && res.statusText === 'OK') {
            return {
                props: {
                    showSpinner: false,
                    isErr: false
                }
            };
        }

        return {
            props: {
                showSpinner: false,
                isErr: true
            }
        };
    };
</script>

<script lang="ts">
    export let isErr: boolean = false;

    export let showSpinner: boolean = true;
</script>

<section>
    {#if showSpinner}
        <!-- spinner -->
    {:else if isErr}
        <!-- err -->
    {:else}
        <!-- ok -->
    {/if}
</section>

这里还提到了可能与此相关的其他问题：

__layout.svelte may run twice after browser reload in dev
Svelte module script being run multiple times

我正在使用一种解决方法，即添加一个按钮以单击以获取而不是在加载时执行，但这不是此类页面工作方式的正确方法.

Answer 1

发生这种情况是因为 svelte 运行它在服务器上并且运行它在客户端上再次出现。您是否尝试构建用于生产和测试的应用程序？

或者，将 Load 函数中的代码移动到主脚本中的 onMount 函数中。

获取请求在页面加载时和页面完成加载后触发两次

Fetch requet is triggered twice on page load and after page finishes loading

svelte

svelte-3

sveltekit