如何集成 SvelteKit 和 Google Forms？

Question

SvelteKit 于 1 月 19 日发生的重大变更（请参阅此处了解详细信息）意味着我的 Google 表单集成不再工作了。

首先让它工作是一个小困难，而且我无法将其更新 - 我反复收到错误消息，“要访问请求正文，请使用 text/json/arrayBuffer/formData 方法，例如 body = wait request.json()”，以及 GitHub 对话的链接。

这是我的 Contact 组件……

<script>
    let submitStatus;
    const submitForm = async (data) => {
        submitStatus = 'submitting';
        const formData = new FormData(data.currentTarget);
        const res = await fetch('contact.json', {
            method: 'POST',
            body: formData
        });

        const { message } = await res.json();
        submitStatus = message;
    };

    const refreshForm = () => {
        /* Trigger re-render of component */
        submitStatus = undefined;
    };
</script>

这是相应的 contact.json.js：

export const post = async (request) => {
    const name = request.body.get('name');
    const email = request.body.get('email');
    const message = request.body.get('message');

    const res = await fetch(`URL TO RELEVANT GOOGLE FORM GOES HERE`);

    if (res.status === 200) {
        return {
            status: 200,
            body: { message: 'success' }
        };
    } else {
        return {
            status: 404,
            body: { message: 'failed' }
        };
    }
};

任何帮助将不胜感激！

Answer 1

事实上，修复相对简单，只涉及对现有代码的微小更改。我必须访问 event.request （解构为 request），并根据 这个对类似问题的回答。因此，在那之后， contact.json.js 看起来像...

export const post = async ({ request }) => {
    const body = await request.formData();
    const name = body.get('name');
    const email = body.get('email');
    const message = body.get('message');

    const response = await fetch(`URL TO RELEVANT GOOGLE FORM GOES HERE`);

    if (response.status === 200) {
        return {
            status: 200,
            body: { message: 'success' }
        };
    } else {
        return {
            status: 404,
            body: { message: 'failed' }
        };
    }
};

（另请注意，整个表单基于 此由 WebJeda 制作的视频，该视频现在不适用于最新的 SvelteKit 版本，但将通过这个简单的更改。）