Как использовать fetch в проекте Sapper вне маршрутов? - PullRequest
Новая
       9

Как использовать fetch в проекте Sapper вне маршрутов?

1 голос
/ 14 апреля 2020

В Sapper можно использовать this.fetch в функции preload() внутри <script context="module">. Затем Саппер выясняет, использовать ли клиентскую или серверную версию 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 доступен.

Решением может быть использование HTTP-клиента для Node, такого как node-fetch в сервисе API, а затем определение во время выполнения с помощью process.browser если нам нужно использовать fetch или node-fetch.

Есть ли лучший способ преодолеть это ограничение Саппера?

1 Ответ

2 голосов
/ 14 апреля 2020

Решение, которое вы придумали, является наиболее распространенным. Альтернативой может быть передача this.fetch в качестве аргумента вместе с другими методу get Json: 

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

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