svelte - 如何在路线之外的 Sapper 项目中使用 fetch？

Question

在 Sapper 中，可以使用 this.fetch在 preload()内部函数<script context="module"> .然后 Sapper 确定是使用 fetch 的客户端还是服务器版本.

<script context="module">
    export async function preload() {
        const res = await this.fetch(`something.json`);
    }
</script>

在路由中写入所有请求不能很好地扩展，因此必须创建 api服务来做这样的事情:

<script context="module">
    import {getJson} from 'api';

    export async function preload() {
        const res = await getJson();
    }
</script>

这会产生一个问题，因为在 preload() 之外功能没有 this上下文由 Sapper 提供，因此没有 this.fetch在 Node 上下文中运行时可用(加载应用程序的第一页并执行 SSR 时)。之后所有请求都是从浏览器发出的，所以规则 fetch可用。

一种解决方案可能是为 Node 使用 HTTP 客户端，例如 node-fetch在 api 服务中，然后在运行时使用 process.browser 确定如果我们需要使用 fetch或 node-fetch .

有没有更好的方法来克服这个 Sapper 限制？

Answer 1

您提出的解决方案是最常见的解决方案。
另一种方法是通过 this.fetch作为 getJson 方法的其他参数:

<script context="module">
    import {getJson} from 'api';

    export async function preload() {
        const res = await getJson(this.fetch);
    }
</script>