当 api 端点不可用时，页面崩溃

Question

正在开发 svelte-kit 应用并使用第 3 方 api。

当 api 端点不可用时，try catch 块将捕获错误，此时我可以选择重定向或发回错误和状态。在发送 404 之类的错误的情况下，如果我想显示普通 404 通用错误页面以外的内容，则需要使用模板 __error.svelte。

示例来自 sveltekit init 的 todo 演示：如果 todos 端点而不是道具可用，我们 return {状态：404，错误：'Not Found'}。

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

    export const load: Load = async ({ fetch }) => {
        try {

            const res = await fetch('/notavailable.json');


            if (res.ok) {
                const todos = await res.json();

                return {
                    props: { todos }
                };
            }


        } catch (error) {

                return {
                    status: 404,
                    error: "Page Not Found"
                };
            
        }

    };
</script>
<h1>Current Page</h2>

如何 return 显示错误消息但仍加载当前页面？（不是重定向或嵌套模板回退而是留在页面上？）

如果我有一个 table 列表，我希望只有 header 存在并且消息会出现在应用程序的指定区域。

它接缝我丢失了一些东西或重定向并且 __error.svelte 嵌套模板是要走的路吗？

Answer 1

我在我的 __error.svelte 模板中发现了一个我不小心遗漏的错误...在这个过程中我想出了如何将错误传递给页面而不是重定向到错误模板。

其实很简单：

如果您想触发默认错误处理程序 (__error.svelte) 而不是 return 错误和状态，就像我在上面的问题中所做的那样。
如果您仍然想继续页面并处理页面中的错误消息而不是 return props 并将错误作为 prop 传递给组件实例：

    <script context="module" lang="ts">
        import { enhance } from '$lib/form';
        import type { Load } from '@sveltejs/kit';
    
        export const load: Load = async ({ fetch }) => {
            try {
    
                const res = await fetch('/notavailable.json');
    
    
                if (res.ok) {
                    const todos = await res.json();
    
                    return {
                        props: { todos }
                    };
                }
    
    
            } catch (error) {
    
                    return {
                        props: {
                            todos:[],
                            error: {
                                status: 404,
                                error: "Page Not Found"
                            }
                        }
                    };
                
            }
    
        };
    </script>

当 api 端点不可用时，页面崩溃

When api endpoint is not available, page crashes

svelte

sveltekit