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

В этом руководстве я покажу вам, как использовать 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-запросы к серверу. Для каждого запроса он создает объект, Promiseкоторый необходимо разрешить, чтобы определить тип контента и получить доступ к данным.

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

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

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

4. Краткое знакомство с Fetch API.

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

Короче говоря, мы сначала определяем путь ( Fetch ), во-вторых, запрашиваем данные с сервера ( Request ), в-третьих определяем тип контента ( Body ) и, наконец, что не менее важно, мы получаем доступ к данным ( Response ).

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

The path we'll be using for our examples //jsonplaceholder.typicode.com/users // returns JSON

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

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

Базовый шаблон API Fetch:

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

Примеры API получения

  1. Отображение пользователя
  2. Отображение списка пользователей
  3. Создание нового пользователя
  4. Удаление пользователя
  5. Обновление пользователя
Заметка! Ресурс на самом деле не будет создан на сервере, но вернет поддельный результат, имитирующий реальный сервер.

1. Отображение пользователя

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

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

пример

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.

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

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

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

  • Сравнение Angular и React
  • Хаотический ум приводит к хаотическому коду
  • Разработчики, которые постоянно хотят узнавать новое
  • Практическое руководство по модулям ES6
  • Изучите эти основные веб-концепции
  • Развивайте свои навыки с помощью этих важных методов JavaScript
  • Программируйте быстрее, создавая собственные команды bash

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

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