Fetch, как и многие другие подаренные нам инструменты, — это очень мощный и уникальный инструмент, который позволяет нам начать наше путешествие в асинхронное программирование. Сначала мы рассмотрим основы того, что такое API, поймем разницу между GET и POST, а затем проверим его, используя наш собственный фиктивный сервер с помощью json-server.
Во-первых, что такое API? Я уверен, что мы все слышали этот термин, но никогда не останавливались, чтобы спросить себя, что это такое или что оно делает. API расшифровывается как Application Programming Interface… круто, но для нас это ничего не значит. По сути, API является посредником, когда дело доходит до связи с сервером, это происходит так… наше приложение отправляет наш HTTP-запрос через Интернет, который затем проходит через наш API, чтобы сервер мог понять наш запрос. Сервер извлекает данные или помещает данные в базу данных, и мы получаем ответ от нашего сервера, который снова проходит через наш API.
Теперь давайте поговорим об этих двух методах, ранее называвшихся HTTP Events, GET и POST — это лишь некоторые из нескольких типов запросов, которые мы можем отправить на наш сервер. GET не требует пояснений, его задача состоит в извлечении или «получении» данных с сервера, а POST вместо получения данных отправляет данные для «отправки» на наш сервер.
Давайте готовиться! В сегодняшнем примере у меня есть база данных из 10 персонажей покемонов, мы дали каждому персонажу имя, ссылку на изображение и количество лайков, вот как выглядит наш файл БД.
Этот файл имеет формат JSON, что означает нотация объектов JavaScript. Это то, на что это похоже, это формат объектов JavaScript, который может использовать JavaScript. Начнем с установки нашего приложения json-server.
Я бы рекомендовал добавить к этой команде флаг -g, чтобы сделать эту установку глобальной.
Теперь в нашем терминале Ubuntu мы запустим сервер с помощью этой команды.
В нашем примере у нас есть файл маршрутов, поэтому мы передадим флаг маршрутов, флаг наблюдения будет «следить» за любыми изменениями в файле db.json.
Как только терминал отобразит «Ожидание…» и мы сможем перейти на localhost:3000/{YOURDBFILE}, наш сервер готов!
Давайте рассмотрим синтаксис fetch! Сначала попробуем отправить GET-запрос на этот сервер. К счастью, тип запроса fetch по умолчанию — GET, поэтому после этого все, что нам нужно сделать, — это передать получение нашего URL-адреса. мы должны вызвать .then для нашей выборки, эта команда будет ждать завершения предыдущей команды, в нашем случае нашей выборки, а затем запустит функцию обратного вызова. Вот как мы печатаем наши необработанные данные:
Чтобы иметь возможность использовать эти данные, мы должны преобразовать их в json. Давайте консоль зарегистрируем результат этого.
Похоже, наш GET-запрос работает, давайте теперь попробуем добавить некоторые данные на этот сервер! Используя нашу ту же команду выборки, мы также можем отправить запрос POST на наш сервер, нам просто нужно немного изменить наш синтаксис, все, что нам нужно сделать, это передать второй аргумент, который будет объектом. Вот как будет выглядеть этот объект:
Мы можем создать для этого новый объект или передать анонимный объект прямо в выборку, в этом случае мы вырвемся и создадим новый объект. Этот объект имеет 3 записи, метод, заголовки и тело. Мы также можем видеть этот метод stringify, которому мы передадим объект для преобразования в JSON. Вот как будет выглядеть полная команда
Теперь давайте проверим это, мы будем получать и печатать наши данные до и после этого запроса, чтобы убедиться, что они были правильно отправлены на сервер. Мы также должны увидеть, как наши запросы появляются в нашем терминале, где работает сервер. Итак, запустив это снова, давайте посмотрим на наши окончательные результаты!
Похоже, хорошее начало, давайте осмотрим консоль.
Кажется, мы это сделали! Наш новый покемон, Пикачу, теперь живет в базе данных нашего сервера. Если вы хотите глубже изучить Fetch API, есть еще 3 широко используемых метода, которые вы можете изучить: PUT, PATCH и DELETE.
Спасибо, что прочитали мой первый блог по программированию, надеюсь, я смог лучше понять вас или, может быть, даже познакомить вас с API выборки :).
