Как получить данные в Svelte?

В этом руководстве рассматривается, как вы можете потреблять и отображать данные из API в вашем приложении Svelte. Вы можете взаимодействовать с API в Svelte в onMount()хуке жизненного цикла, используя Axios, Apisauce, собственный Fetch API JavaScript или любой HTTP-клиент по вашему выбору.

Мы создадим образец приложения, которое взаимодействует и отображает данные, предоставляемые сервером REST API. Это приложение позволит пользователям получать списки сообщений в блогах из REST API и отображать их на странице.

Предпосылки

Чтобы следовать этому руководству, вам необходимо иметь некоторые предварительные знания JavaScript и CSS, а также некоторое знакомство со Svelte.

Вам также потребуются установленные на вашем компьютере Node и npm, а также Git.

Что такое REST API?

Аббревиатура API означает «интерфейс прикладного программирования», и, говоря простым языком, это способ взаимодействия двух приложений или обмена данными друг с другом.

REST API — это тип API, который реализует протокол передачи репрезентативного состояния (REST). REST — это архитектурный стиль для создания веб-сервисов, взаимодействующих по протоколу HTTP. Структура запроса REST включает четыре основных части: метод HTTP, конечную точку, заголовки и тело запроса.

HTTP-методы

Метод HTTP в запросе API сообщает серверу, какое действие ожидает от него клиент. Наиболее широко используемые сегодня HTTP-методы включают GET, POST, PATCH, DELETE и кратко описаны ниже.

• GET: используется для получения или чтения информации с сервера
• POST: используется для создания или хранения записей на сервере
• PUT/ PATCH: используется для обновления или исправления записей на сервере
• DELETE: используется для удаления одной или нескольких записей из точки ресурса

Конечные точки HTTP

Конечная точка HTTP в основных терминах — это адрес или URL-адрес, который указывает, где к одному или нескольким ресурсам можно получить доступ с помощью API.

Заголовки HTTP

Заголовки HTTP — это пары ключ-значение, которые позволяют клиенту передавать информацию серверу в запросе и наоборот в ответе.

Тело запроса

Тело вызова API — это полезная нагрузка (или данные), отправляемая от клиента на сервер.

Настройка нашего приложения Svelte

Мы создадим образец приложения, которое взаимодействует с внешним REST API для получения списка сообщений блога с сервера. Затем мы отобразим этот список в клиенте Svelte.

Мы не собираемся слишком углубляться в комплектование и инфраструктуру приложений Svelte в этом руководстве, поэтому мы будем следовать инструкциям на официальном сайте Svelte, чтобы запустить приложение.

В предпочитаемом вами каталоге запустите:

npx degit sveltejs/template svelte-demo-app

Затем войдите в папку, установите необходимые зависимости с помощью npm и запустите сервер разработки:

cd svelte-demo-app
npm install
npm run dev --open

Теперь вы должны увидеть сообщение «Hello, World!» сообщение отображается в вашем браузере по адресу http: // localhost: 5000 /.

Использование Fetch API для использования REST API

В этой статье мы рассмотрим два метода получения данных из API. Во-первых, мы рассмотрим использование Fetch API, встроенного в JavaScript. Затем в следующем разделе мы рассмотрим использование клиента Axios, прежде чем после этого кратко сравнить и сопоставить два метода.

Что такое Fetch API?

Fetch API — это основанный на обещаниях механизм, который позволяет выполнять асинхронные запросы API к конечным точкам в JavaScript. Если вы знакомы с этим XMLHttpRequest()методом, вы, вероятно, согласитесь, что Fetch API является улучшением — в том смысле, что он предоставляет дополнительные функции, такие как кэширование данных, возможность чтения потоковых ответов и многое другое.

Использовать Fetch API так же просто, как вызвать fetch()метод, указав в качестве обязательного параметра путь к извлекаемому ресурсу. Например:

const response = fetch('your-api-url.com/endpoint');

Передача большего количества параметров в запросе

Этот fetch()метод также позволяет вам уточнить запрос, который вы делаете, передав initобъект в качестве необязательного второго параметра.

initОбъект позволяет передать дополнительные детали вместе с вашим запросом. Наиболее распространенные из них перечислены ниже:

• method: строка, указывающая, какой HTTP-метод отправляется на сервер, и может быть одним из GET, POST, PUT, PATCH или DELETE.
• cache: строка, указывающая, следует ли кэшировать запрос. Разрешена варианта default, no-cache, reload, force-cache, only-if-cached.
• headers: объект, используемый для установки заголовков, передаваемых вместе с примером запроса.
• body: Объект наиболее часто используется в POST, PUTили PATCHзапросы. Он позволяет передавать полезные данные на сервер.

Создание App компонента

Когда ваши строительные леса Svelte будут завершены, откройте srcпапку и найдите App.svelteкомпонент. Это то, что отображается, когда вы посещаете домашнюю страницу проекта.

Как видите, компонент содержит <script>блок для нашего JavaScript, <style>блок для наших стилей, а также <main>тег с нашей разметкой. Это основная анатомия компонента Svelte.

Начнем с импорта onMountхука из Svelte, вот так:

import { onMount } from "svelte";

onMountКрюк в стройном является метод Жизненного цикла используется для определения инструкций, которые должны быть осуществлены, как только компонент, в котором он используется впервые оказывается в дереве DOM.

Если вы работаете в среде React, вы должны заметить, что onMountловушка в Svelte работает аналогично componentDidMount()методу в компонентах React на основе классов или useEffect()ловушке в функциональных компонентах React.

Затем мы собираемся определить переменную для хранения URL-адреса конечной точки, которую мы собираемся использовать:

const endpoint = "https://jsonplaceholder.typicode.com/posts";

Примечание. JSONPlaceholder — удобный бесплатный онлайн-интерфейс REST API, который можно использовать всякий раз, когда вам нужны поддельные данные.

Затем создайте postsпеременную и присвойте ей пустой массив:

let posts = [];

Этот пустой postsмассив будет заполнен данными, которые мы получаем от нашего API после того, как мы сделаем вызов.

Наконец, теперь мы можем использовать этот onMount()метод для отправки GETзапроса к конечной точке с помощью JavaScript Fetch API, как показано ниже:

onMount(async function () {
  const response = await fetch(endpoint);
  const data = await response.json();
  console.log(data);
});

Собранный по частям ваш Appкомпонент должен содержать следующее:

<script>
  import { onMount } from "svelte";
  const endpoint = "https://jsonplaceholder.typicode.com/posts";
  let posts = [];

  onMount(async function () {
    const response = await fetch(endpoint);
    const data = await response.json();
    console.log(data);
  });

  export let name;
</script>

<main>
  <h1>Hello {name}!</h1>
  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
  /* ommitted for brevity */
</style>

Чтобы убедиться, что это работает, сохраните файл, затем посетите http: // localhost: 3000 / и проверьте инструменты разработчика браузера. Вы должны увидеть массив объектов, записанных в консоль.

Примечание: если вам интересно это export let name;утверждение, то вот как мы определяем props в Svelte. exportКлючевое слово здесь заявляет, что данное значение является опорой, которая будет предоставлена родителю компонента.

Отображение данных с конечной точки

Теперь, когда мы смогли успешно получить данные с нашей конечной точки, пришло время визуализировать контент на нашей странице. Мы можем сделать это с помощью каждого блока :

{#each posts as article}
  <div>
    <p>{article.title}</p>
  </div>
{/each}

Измените разметку App.svelteна следующую:

<main>
  <h1>Hello {name}!</h1>
  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>

  {#each posts as article}
    <div>
      <p>{article.title}</p>
    </div>
  {/each}
</main>

Затем добавьте в блок скрипта следующую строку:

posts = data;

Теперь вы должны увидеть список заголовков сообщений, отображаемых на странице.

Использование клиента Axios для использования REST API

Axios — это основанная на обещаниях библиотека JavaScript с открытым исходным кодом для выполнения вызовов API, которая очень похожа на Fetch API. Axios предоставляет некоторые специальные методы для выполнения различных запросов API. Например:

• axios.get() используется для выполнения HTTP-запроса GET к конечной точке
• axios.post() используется для выполнения запроса POST при создании записей
• любой из axios.patch()и axios.put()может использоваться, когда вам нужно сделать HTTP-запрос для обновления записи в API.
• axios.delete() используется для отправки HTTP-запроса DELETE в конечную точку

Установка Axios и обновление Appкомпонента

Чтобы использовать Axios в нашем проекте, нам сначала нужно его установить. В корне проекта запустите:

npm i axios@0.21.1

Затем в Appкомпонент включите библиотеку:

import axios from "axios";

Также измените код в onMountхуке следующим образом:

onMount(async function () {
  const response = await axios.get(endpoint);
  console.log(response.data);
  posts = response.data;
});

И вы должны увидеть те же результаты, что и раньше, в своем браузере.

Обработка ошибок

Поскольку запрос Ajax выполняется внутри асинхронной функции, нам нужно будет использовать try … catchблок, чтобы сообщать о том, что что-то идет не так:

onMount(async function () {
  try {
    const response = await axios.get(endpoint);
    console.log(response.data);
    posts = response.data;
  } catch (error) {
    console.error(error);
  }
});

Это не уникально для Axios. Вы применили бы тот же метод при работе с Fetch API.

Сгруппированные запросы в Axios

Одной из приятных особенностей Axios является то, что вы можете делать одновременные HTTP-запросы к нескольким конечным точкам, используя этот axios.all()метод. Этот метод принимает группу запросов в виде массива и возвращает единственный объект обещания, который разрешается только тогда, когда запросы переданного массива были разрешены индивидуально.

Синтаксис для этого показан во фрагменте ниже:

axios.all([
  axios.get("https://jsonplaceholder.typicode.com/posts"),
  axios.get("https://jsonplaceholder.typicode.com/comments"),
])
.then((responseArr) => {
  //this will be executed only when all requests are complete
  console.log("First Post: ", responseArr[0].data[0].title);
  console.log("Second Comment: ", responseArr[1].data[1].body);
})
.catch((error) => {
  console.log(error);
});

Здесь (для разнообразия) я связываю методы, которые используются then()и используются catch()для устранения ошибок.

Axios против Fetch

По сравнению с fetch()Axios, у Axios есть некоторые дополнительные дополнения, такие как:

• перехват запросов и ответов
• более оптимизированный процесс обработки ошибок
• XSRF защита
• поддержка загрузки
• время ожидания ответа
• возможность отмены запросов
• поддержка старых браузеров
• автоматическое преобразование данных JSON

Кроме того, Axios можно использовать как в браузере, так и с Node.js. Это облегчает совместное использование кода JavaScript между браузером и серверной частью или выполнение рендеринга клиентских приложений на стороне сервера.

Заключение

Мы многое рассмотрели в этом пошаговом руководстве. Мы начали с того, что рассмотрели, что такое REST API и почему вы можете захотеть использовать внешнюю службу в своем приложении. Затем мы настроили проект Svelte и использовали Fetch API для получения списка статей из фиктивного API с помощью onMountметода Svelte. Наконец, мы взглянули на HTTP-библиотеку Axios, а затем переписали наш скрипт, чтобы использовать наш макет API, используя Axios вместо Fetch API.

Надеюсь, вам понравилось читать это руководство, и, надеюсь, оно познакомило вас с некоторыми методами использования REST API в приложении Svelte. Мы применили прагматический подход к изучению того, как работать с REST API, используя onMountметод жизненного цикла с Fetch API и клиентом Axios.