Практическое руководство ES6 о том, как выполнять HTTP-запросы с помощью Fetch API

prakticheskoe rukovodstvo es6 o tom kak vypolnyat http zaprosy s pomoshhyu

В этом руководстве я покажу вам, как использовать Fetch API (ES6+) для выполнения HTTP-запросов в REST API с некоторыми практическими примерами, с которыми вы, скорее всего, столкнетесь.

Хотите быстро просмотреть примеры HTTP? Выделите раздел 5. Первая часть описывает асинхронную часть JavaScript при работе с HTTP-запросами.

Примечание: Все примеры написаны в ES6 со стрелочными функциями.

Распространенная схема современных веб-/мобильных приложений — запрос или показ определенных данных с сервера (например, пользователей, публикации, комментарии, подписки, платежи и т.п.), а затем манипулирование ими с помощью CRUD (создавать, читать, обновление или удаление).

Для дальнейшего манипулирования ресурсом мы часто используем эти методы JS (рекомендуется), например .map(), .filter() и .reduce().

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

Вот что мы рассмотрим

  1. Работа с асинхронными HTTP-запросами JS
  2. Что такое AJAX?
  3. Почему Fetch API?
  4. Краткое вступление в Fetch API
  5. Fetch API – примеры CRUD ← хорошие вещи!

1. Работа с асинхронными HTTP-запросами JS

Одной из самых сложных частей понимания того, как работает JavaScript (JS), является понимание того, как работать с асинхронными запросами, что требует понимания того, как работают обещания и обратные вызовы.

В большинстве языков программирования мы вынуждены полагать, что операции происходят в порядке (последовательно). Первая строка должна быть выполнена, прежде чем мы сможем перейти к следующей строке. Это имеет смысл, потому что именно так мы, люди, работаем и выполняем ежедневные задания.

Но с JS у нас есть несколько операций, которые выполняются в фоновом/переднем плане, и мы не можем иметь веб-приложение, которое зависает каждый раз, когда ожидает события пользователя.

Описание JavaScript как асинхронного, возможно, вводит в заблуждение. Точнее сказать, что JavaScript является синхронным и однопоточным с разными механизмами обратного вызова. Детальнее.

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

2. Что такое AJAX

AJAX означает асинхронный JavaScript и XML и позволяет асинхронно обновлять веб-страницы путем обмена данными с веб-сервером при работе программы. Короче говоря, это, по сути, означает, что вы можете обновлять части веб-страницы, не перезагружая всю страницу (URL-адрес остается неизменным).

AJAX – это обманчивое название. Приложения AJAX могут использовать XML для транспортировки данных, но они одинаково распространены для транспортировки данных, как обычный текст или текст JSON.
— w3shools.com

AJAX весь путь?

Я видел, что многие разработчики, как правило, очень увлекаются тем, что имеют все в одностраничном приложении (SPA), и это приводит к большому количеству асинхронных проблем! Но, к счастью, у нас есть такие библиотеки, как Angular, VueJS и React, что делает этот процесс гораздо более простым и практичным.

В общем, важно иметь баланс между тем, что перезагружать всю страницу или ее части.

И в большинстве случаев перезагрузка страницы хорошо работает с точки зрения того, насколько мощными стали браузеры. Ранее перезагрузка страницы занимала секунды (в зависимости от расположения сервера и возможностей браузера). Но современные браузеры очень быстры, поэтому решение о том, выполнять ли AJAX или перезагружать страницу, не имеет большой разницы.

Мой личный опыт показывает, что создать поисковую систему с помощью простой поисковой кнопки гораздо легче и быстрее, чем без кнопки. И в большинстве случаев клиенту безразлично, будь то SPA или дополнительная перезагрузка страницы. Конечно, не поймите меня неправильно, я люблю СПА, но нам нужно рассмотреть пару компромиссов, если мы имеем дело с ограниченным бюджетом и нехваткой ресурсов, может быть, быстрое решение является лучшим подходом.

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

3. Почему Fetch API?

Это позволяет выполнять декларативные HTTP-запросы к серверу. Для каждого запроса он создает a Promise которые необходимо решить, чтобы определить тип содержимого и получить доступ к данным.

Теперь преимущество Fetch API заключается в том, что полностью поддерживается экосистемой JS, а также является частью документов MDN Mozilla. И последнее, но не менее важное, он работает из коробки в большинстве браузеров (кроме IE). В долгосрочной перспективе, я думаю, это будет стандартным способом вызова веб-API.

Примечание! Я хорошо знаю другие подходы HTTP, такие как использование Observable с RXJS, и то, как он сосредотачивается на управлении памятью/утечки с точки зрения подписки/отмены подписки и т.д. И, может быть, это станет новым стандартным способом выполнения HTTP-запросов, кто знает?

Во всяком случае, в этой статье я сосредотачиваюсь только на Fetch API, но в будущем могу написать статью об Observable и RXJS.

4. Краткое вступление в Fetch API

The fetch() метод возвращает a Promise что решает Response от Request чтобы показать статус (успешно или нет). Если вы когда-нибудь получите это сообщение promise {} на экране журнала консоли, не паникуйте – это в основном означает, что Promise работает, но ждет своего разрешения. Итак, чтобы ее решить, нам нужно .then() обработчик (обратный вызов) для доступа к содержимому.

Итак, если коротко, мы сначала определяем путь (Убрать), во-вторых, запрашивать данные от сервера (Запрос), в-третьих, определите тип содержимого (Тело) и последнее, но не менее важное, мы получаем доступ к данным (Ответ).

Если вам трудно понять это понятие, не беспокойтесь. Вы получите лучший обзор с помощью приведенных ниже примеров.

The path we'll be using for our examples 
 // returns JSON

5. Fetch API – примеры HTTP

Если мы хотим получить доступ к данным, нам нужно два .then() обработчики (обратный вызов). Но если мы хотим манипулировать ресурсом, нам нужен только один .then() обработчик. Однако мы можем использовать второй, чтобы убедиться, что значение было отправлено.

Шаблон Basic Fetch API:

Примечание! Приведенный выше пример приведен только для иллюстрации. Код не будет работать, если вы его выполните.

Получить примеры API

  1. Показ пользователя
  2. Отображение списка пользователей
  3. Создание нового пользователя
  4. Удаление пользователя
  5. Обновление пользователя

Примечание! Ресурс не будет создан на сервере, но вернет фальшивый результат, имитирующий настоящий сервер.

1. Показ пользователя

Как упоминалось ранее, процесс показа одного пользователя состоит из двух .then() обработчики (обратный вызов), первый для определения объекта, а второй для доступа к данным.

Обратите внимание, просто прочитав строку запроса /users/2 мы можем понять/предположить, что делает API. Чтобы получить дополнительную информацию о том, как писать высококачественный API REST, просмотрите эти рекомендации, написанные Махешем Халдаром.

Пример

2. Отображение списка пользователей

Пример почти идентичен предыдущему, за исключением того, что это строка запроса /usersи нет /users/2.

Пример

3. Создание нового пользователя

Этот пример несколько отличается от предыдущего. Если вы не знакомы с протоколом HTTP, он просто предоставляет нам пару сладких методов, например POST, GET,DELETE, UPDATE, PATCH и PUT. Эти методы являются глаголами, которые просто описывают тип действия, которое нужно выполнить и в основном используются для манипулирования ресурсом/данными на сервере.

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

Примечание: fetch() параметры метода идентичны параметрам Request() конструктор.

Пример

4. Удаление пользователя

Чтобы удалить пользователя, нам сначала нужно нацелить пользователя /users/1а затем мы определяем тип метода, который есть DELETE.

Пример

5. Обновление пользователя

Глагол HTTP PUT используется для манипулирования целевым ресурсом, и если вы хотите внести частичные изменения вам нужно будет использовать PATCH. Чтобы узнать больше о том, что делают эти глаголы HTTP, просмотрите это.

Пример

Вывод

Теперь у вас есть базовое понимание того, как получить или манипулировать ресурсом с сервера с помощью JavaScript Fetch API, а также как работать с обещаниями. Эта статья может использоваться в руководстве по структурированию запросов API для операций CRUD.

Лично я считаю, что API Fetch является декларативным, и вы можете легко понять, что происходит без какого-либо опыта технического кодирования.

Все примеры приведены в запросе на обещанную базу, где мы используем цепочку запроса .then обратный звонок. Это стандартный подход, с которым знакомы многие разработчики, однако, если вы хотите использовать async/await просмотрите эту статью. Концепция та же, за исключением async/await легче читать и писать.

Вот несколько статей, которые я написал о веб-экосистеме вместе с личными советами и подсказками по программированию.

Вы можете найти меня на Medium, где я еженедельно публикую. Или вы можете подписаться на меня в Twitter, где я публикую соответствующие советы и рекомендации по веб-разработке вместе с личными историями.

PS Если вам понравилась эта статья и вы хотите больше подобных, пожалуйста, хлопайте и поделитесь с друзьями, которым она может понадобиться, это хорошая карма.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *