svelte - 如何从 Sveltekit 版本 v1.0.0-next.287 中的端点获取数据-6ren

svelte - 如何从 Sveltekit 版本 v1.0.0-next.287 中的端点获取数据

转载作者：行者123 更新时间：2023-12-02 18:17:56

昨天我将 SvelteKit 版本从 v1.0.0-next.241 更新到 v1.0.0-next.287，因为我无法获取组件中的数据。我收到一条错误消息:Unexpected token < in JSON atposition 0。当我尝试解析响应时发生错误:await response.json()自版本 241 以来，获取数据方面有什么变化吗？现在该怎么做？

索引.svelte

<script>
     import { session } from '$app/stores';
     import { onMount } from 'svelte';

            onMount(async () => {
                    const response = await fetch('/content', {
                            method: 'POST',
                            body: JSON.stringify({
                                user_id: $session.user.id
                            }),
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        });
                        const data = await response.json(); // error occurs on this line
                });
</script>

index.js

export async function post({ request }) {
    const data = await request.json();
    try {
        if (data.user_id > 0) {
            let rows = await db.result;

            if (rows.length > 0) {
                return {
                    status: 200,
                    body: {
                        rows
                    },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                };
            }

            return {
                status: 500,
                body: {
                    rows: [],
                    message: 'endp result err: ' + rows.message
                },
                headers: {
                    'Content-Type': 'application/json'
                }
            };
        }

        return {
            status: 400,
            body: {
                rows: [],
                message: 'User not authorized'
            },
            headers: {
                'Content-Type': 'application/json'
            }
        };
    } catch (err) {
        return {
            status: 500,
            body: {
                rows: [],
                message: 'endp other err: ' + err.message
            },
            headers: {
                'Content-Type': 'application/json'
            }
        };
    }
}

Postman请求端点的结果

<!DOCTYPE html>
<html lang="en" theme="white">

<head>
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <link rel="icon" href="../img/favicon.png" />
    <link rel="stylesheet" href="../css/bootstrap-icons/bootstrap-icons.css" />
    <link rel="stylesheet" href="../css/charts/styles.min.css" />
    <link rel="stylesheet" href="../css/tiptap.css" />
    <link rel="stylesheet" href="../css/all.css" />
    <link rel="stylesheet" href="../css/global.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Lighthouse - Login</title>
    <style data-svelte>
        .action-text.s-dYWHY7G7-e5q.s-dYWHY7G7-e5q {
            font-size: 16px;
            line-height: 20px;
            text-decoration: none;
            color: #fff;
            width: 100%;
            padding: 0 1rem
        }

        .action-text.s-dYWHY7G7-e5q>span.s-dYWHY7G7-e5q {
            margin-left: 0.75rem;
            vertical-align: top
        }

        .s-dYWHY7G7-e5q.s-dYWHY7G7-e5q {}

        .action-link.s-u1xw7poppUIF {
            text-align: center;
            align-items: center;
            vertical-align: middle;
            justify-content: center;
            padding-top: 10px
        }

        .s-u1xw7poppUIF {}

        .search-wrapper.s-DzH6K7xlQw-L {
            position: relative;
            display: flex;
            max-width: 28rem;
            width: 100%;
            margin-left: 0.5rem;
            height: 3rem;
            background-color: #393939;
            color: #fff;
            transition: max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
                background 0.11s cubic-bezier(0.2, 0, 0.38, 0.9)
        }

        .search-wrapper-hidden.s-DzH6K7xlQw-L {
            max-width: 3rem;
            background-color: #161616
        }

        .search-focus.s-DzH6K7xlQw-L {
            outline: 2px solid #fff;
            outline-offset: -2px
        }

        .search-wrapper-2.s-DzH6K7xlQw-L {
            display: flex;
            flex-grow: 1;
            border-bottom: 1px solid #393939
        }

        .btn-search.s-DzH6K7xlQw-L {
            width: 3rem;
            height: 100%;
            padding: 0;
            flex-shrink: 0;
            opacity: 1;
            transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
                opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9)
        }

        .btn-search-disabled.s-DzH6K7xlQw-L {
            border: none;
            pointer-events: none
        }

        .input-search.s-DzH6K7xlQw-L {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.375rem;
            letter-spacing: 0;
            color: #fff;
            caret-color: #fff;
            background-color: initial;
            border: none;
            outline: none;
            width: 100%;
            height: 3rem;
            padding: 0;
            transition: opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9)
        }

        .input-hidden.s-DzH6K7xlQw-L {
            opacity: 0;
            pointer-events: none
        }

        .btn-clear.s-DzH6K7xlQw-L {
            width: 3rem;
            height: 100%;
            padding: 0;
            flex-shrink: 0;
            opacity: 1;
            display: block;
            transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
                opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9)
        }

        .btn-clear.s-DzH6K7xlQw-L:hover {
            background-color: #4c4c4c
        }

        .btn-clear-hidden.s-DzH6K7xlQw-L {
            opacity: 0;
            display: none
        }

        .s-DzH6K7xlQw-L {}

        .subject-divider.s-CDH0hzNq6wMb.s-CDH0hzNq6wMb {
            color: #525252;
            padding-bottom: 4px;
            border-bottom: 1px solid #525252;
            margin: 32px 1rem 8px
        }

        .subject-divider.s-CDH0hzNq6wMb span.s-CDH0hzNq6wMb {
            font-size: 0.75rem;
            font-weight: 400;
            line-height: 1rem;
            letter-spacing: 0.32px;
            color: #c6c6c6
        }

        .s-CDH0hzNq6wMb.s-CDH0hzNq6wMb {}

        label.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            white-space: nowrap;
            border: 0;
            visibility: inherit;
            clip: rect(0, 0, 0, 0)
        }

        [role="search"].s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
            position: relative;
            display: flex;
            max-width: 28rem;
            width: 100%;
            margin-left: 0.5rem;
            height: 3rem;
            background-color: #393939;
            color: #fff;
            transition: max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
                background 0.11s cubic-bezier(0.2, 0, 0.38, 0.9)
        }

        [role="search"].s-qIO5oRXzFdSn.s-qIO5oRXzFdSn:not(.active) {
            max-width: 3rem;
            background-color: #161616
        }

        [role="search"].active.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
            outline: 2px solid #fff;
            outline-offset: -2px
        }

        [role="combobox"].s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
            display: flex;
            flex-grow: 1;
            border-bottom: 1px solid #393939
        }

        input.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
            width: 100%;
            height: 3rem;
            padding: 0;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.375rem;
            letter-spacing: 0;
            color: #fff;
            caret-color: #fff;
            background-color: initial;
            border: none;
            outline: none;
            transition: opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9)
        }

        input.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn:not(.active) {
            opacity: 0;
            pointer-events: none
        }

        button.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
            width: 3rem;
            height: 100%;
            padding: 0;
            flex-shrink: 0;
            opacity: 1;
            transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
                opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9)
        }

        .disabled.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
            border: none;
            pointer-events: none
        }

        [aria-label="Clear search"].s-qIO5oRXzFdSn.s-qIO5oRXzFdSn:hover {
            background-color: #4c4c4c
        }

        .hidden.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
            opacity: 0;
            display: none
        }

        ul.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
            position: absolute;
            z-index: 10000;
            padding: 1rem 0;
            left: 0;
            right: 0;
            top: 3rem;
            background-color: #161616;
            border: 1px solid #393939;
            border-top: none;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5)
        }

        [role="menuitem"].s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {
            padding: 6px 1rem;
            cursor: pointer;
            font-size: 0.875rem;
            font-weight: 600;
            line-height: 1.29;
            letter-spacing: 0.16px;
            transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
            display: block;
            text-decoration: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #c6c6c6
        }

        .selected.s-qIO5oRXzFdSn.s-qIO5oRXzFdSn,
        [role="menuitem"].s-qIO5oRXzFdSn.s-qIO5oRXzFdSn:hover {
            background-color: #353535;
            color: #f4f4f4
        }

        [role="menuitem"].s-qIO5oRXzFdSn span.s-qIO5oRXzFdSn {
            font-size: 0.75rem;
            font-weight: 400;
            line-height: 1.34;
            letter-spacing: 0.32px;
            text-transform: lowercase;
            color: #c6c6c6
        }

        .s-qIO5oRXzFdSn.s-qIO5oRXzFdSn {}
    </style>
</head>

<body>
    <div id="svelte">


        <div class="auth-bg">
            <div class="auth-box p-4 m-auto">

                <div>
                    <div><img src="/img/logo_orig.png" alt="logo" height="96"></div>
                        <div class="py-2">
                            <div class="bx--form-item bx--text-input-wrapper">
                                <label for="ccs-0.gurrqcw5ltk" class="false bx--label">
        Username
      </label>
                                <div class="bx--text-input__field-outer-wrapper">
                                    <div class="bx--text-input__field-wrapper">


                                        <input id="ccs-0.gurrqcw5ltk" placeholder="Enter username..." type="email" value="" class="bx--text-input   ">


      </div>


                                    </div>
                                </div>
                            </div>
                            <div class="py-2">
                                <div class="bx--form-item bx--text-input-wrapper">
                                    <label for="ccs-0.xn3g2icn4s7" class="false bx--label">
        Password
      </label>
                                    <div class="bx--text-input__field-outer-wrapper">
                                        <div class="bx--text-input__field-wrapper">


                                            <input id="ccs-0.xn3g2icn4s7" placeholder="Enter password..." type="password" value="" class="bx--text-input   ">


      </div>


                                        </div>
                                    </div>
                                </div>
                                <div class="py-4">
                                    <button type="button" tabindex="0" class="bx--btn bx--btn--primary">
    Log in</button></div>
                                <div class="py-2">or
                                    <a href="/auth/register" class="bx--link     ">Register</a></div>
                                <div class="py-2">
                                    <a href="/auth/restore" class="bx--link     ">Forgot password?</a></div>
                            </div>
                        </div>
                        <div class="company-logo"><a href="https://www.fh-swf.de/en/"
                                target="_blank"><img src="/img/company-logo.png" alt="company-logo" height="64"></a>
                        </div>
                    </div>

                    <div class="bx--loading-overlay ">
                        <div aria-atomic="true" aria-labelledby="ccs-0.lnde8bksux9" aria-live="assertive"
                            class="bx--loading">
                            <label id="ccs-0.lnde8bksux9" class="bx--visually-hidden">Active loading indicator</label>
                            <svg viewBox="0 0 100 100" class="bx--loading__svg">
                                <title>Active loading indicator</title>
                                <circle cx="50%" cy="50%" r="44" class="bx--loading__stroke"></circle>
                            </svg></div>
                    </div>


                    <script type="module" data-hydrate="1xenv5n">
                        import { start } from "/@fs/Users/elshad/OneDrive/Projects/FH-SWF/StudentAssistant/LighthouseApp/.svelte-kit/runtime/client/start.js";
        start({
            target: document.querySelector('[data-hydrate="1xenv5n"]').parentNode,
            paths: {"base":"","assets":""},
            session: {authenticated:false},
            route: true,
            spa: false,
            trailing_slash: "never",
            hydrate: {
                status: 200,
                error: null,
                nodes: [
                    import("/src/routes/auth/__layout.reset.svelte"),
                        import("/src/routes/auth/login/index.svelte")
                ],
                params: {}
            }
        });
    </script>
                    <script type="application/json" data-type="svelte-props">
                        {}
                    </script>
                </div>
</body>

</html>

最佳答案

您还必须添加 accept header ，以向服务器指示您接受的返回内容，默认情况下这是 html。

headers: {
  "content-type": "application/json",
  "accept": "application/json"
}

关于svelte - 如何从 Sveltekit 版本 v1.0.0-next.287 中的端点获取数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71292584/

文章推荐： android - JetPack Compose 中的副作用

文章推荐： r - 在 R 中，使用日期范围内的事件计数创建变量

文章推荐： Django 每次在运行的服务器上都显示 Zen Poetry

svelte - svelte 编译背后的概念是什么？
我看了你的文章 https://svelte.dev/blog/virtual-dom-is-pure-overhead和其他一些博客，但它们解释了与虚拟 dom 相比，svelte 如何更好。而我想
svelte - Svelte 中的单例
我正在尝试制作一个 Svelte 应用程序，其中我有一个创建 audioSource 并管理它的类(不是 svelte 组件)。我想跨多个组件获取此类实例。现在，我发现的唯一方法是这样做:
svelte - Svelte 中不相关组件之间的实时数据共享
我有一个案例，我打开了两个选项卡 localhost:5000/和localhost:5000/stream并想更新 / 中的变量路径并查看 stream 中的更改实时路径。存储不是这样工作的，如果我
svelte - svelte 中的文件输入不更新数据
我正在尝试创建一个带有客户端文件输入的网站，其中一些数据完全在客户端上处理，并且不会发送到服务器。我有以下 Svelte 组件 (App.svelte): let data; function h
svelte - svelte 中的文件输入不更新数据
我正在尝试创建一个带有客户端文件输入的网站，其中一些数据完全在客户端上处理，并且不会发送到服务器。我有以下 Svelte 组件 (App.svelte): let data; function h
svelte - 如何在本地运行的 Svelte REPL 站点中使用本地构建的 Svelte 3 编译器？
我正在研究 Svelte，并从其 Github 存储库中克隆了它。我可以从站点目录运行 REPL，但它使用来自 unpkg url 的 Svelte。我想尝试我本地构建的编译器并使用它而不是 unpk
svelte - 将样式添加到 svelte js 中的 svelte-routing Link 标签
我想将样式添加到在纤细路由中标记，但我不能。我试图添加一个有一些样式的类，但它没有用。该类包含: .link { text-decoration: none; } 有没有人对此有解决方案
svelte - 在生产环境中隐藏来自开发者工具的原始 .svelte 文件
目前，当我在浏览器中打开开发人员工具时，我可以看到我的原始 svelte 组件，我想隐藏此信息并仅发送丑陋的代码。这是我打开开发者工具时得到的。我正在构建一个单页应用程序。这是我的 rollup.
svelte - 如何在 Svelte 中创建一个可在所有页面中使用的上下文？
我目前正在学习 Svelte，我想为这个副项目创建一个身份验证流程。通常，在 React 中，我习惯使用 Contexts 保存身份验证信息。我想知道 Svelte 是否也可以执行类似的
svelte - 如何替换 Svelte 中目标的内容而不是附加到子项？
调用 new Component({ target }) 将组件附加到目标，我想用新组件替换目标的所有旧内容。我该怎么做？最佳答案如果您正在混合服务器呈现的标记，最好使用 hydrate: tru
svelte - 是否可以将 Svelte 商店作为组件的属性传递？
我有一个简单的 REPL example用于简单的列表详细信息编辑器。它由三个部分组成: Annotation是细节 Annotations遍历数据并创建 Annotation实例 App是创建 An
svelte - 如何构建实时股票报价的 Svelte 商店
我正尝试在 Svelte 商店中维护实时股票报价，以便屏幕上的出价和要价实时更新。我不确定商店的结构如何来保持数据的 react 性和效率。数据来自 websocket，如下所示: {'symbol'
svelte - Svelte 如何处理在 each 循环中更新数组中的对象
下面是一个非常简单的 Svelte 组件。当您单击该按钮时，它会更新 pages[2].name。 Svelte 如何处理这个问题？它是否重新评估所有 3 个 DIV？或者它是否知道只修改第 3 个
svelte - 专注于在 Svelte 组件中点击切换
我制作了一个用于输入财务数字的组件，用于我的输入表单。它现在工作得很好，除了一个奇怪的行为:当我点击输入字段时，它会按预期获得焦点，但是当它已经有焦点时点击它会带走焦点。组件中只有一个 on:cli
svelte - 使用 Svelte 派生存储从多个存储数据创建单个状态对象
我尝试实现一个自定义的 Svelte 商店，它允许我在订阅页面上“抛出”一个单一的状态对象。这是我准备的示例代码: import { derived, writable } from 'svelte/
svelte - 在 svelte 上安装美人鱼
我正在尝试安装带有 Svelte 的 Mermaid 来制作图表。所以我做了以下事情: npm 安装美人鱼然后我得到以下内容: npm WARN svelte-app@1.0.0 No reposi
svelte - 渲染预编译的 svelte 组件
如何渲染使用 svelte.compile() 手动编译的组件？我正在编译这样的组件: import * as svelte from 'svelte/compiler'; var
svelte - 使用 Svelte 更新商店中的数组时未定义
我正在学习 Svelte 以及如何使用它制作自定义商店。我遇到了一个问题，当我尝试使用 update 更新可写数组时，它会在订阅该数组的组件中导致未定义的错误。这是我的商店，我有一个简单的数组，其中
svelte - 如何在 Svelte 中动态渲染组件？
我正在尝试遍历数组以呈现具有 type 值的组件。 import One from './One.svelte'; import Two from './Two.svelte'; import
svelte - 在 Svelte 中的兄弟组件之间传递数据
如何将数据(例如:导航栏标题)传递给父元素中使用的组件？ import Nav from "../components/Nav.svelte"; let navTitle = "MyApp

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

svelte - 如何从 Sveltekit 版本 v1.0.0-next.287 中的端点获取数据