Автор оригинала: FreeCodeCamp Community Member.
В этом руководстве я покажу вам, как использовать API Fetch (ES6 +) для выполнения HTTP-запросов к Отдых API с некоторыми практическими примерами, которые вы встретитесь.
Хотите быстро увидеть примеры HTTP? Перейдите в раздел 5. Первая часть описывает асинхронную часть JavaScript при работе с HTTP-запросы.
Общий шаблон в современном текущем веб-приложениях Web/Mobile – это запросить или показывать некоторые данные с сервера (например, пользователей, посты, комментарии, подписки, платежи и так далее), а затем манипулируют его с помощью CRUD (CREATE, READ, Обновление или удаление) Операции.
Для дальнейшего манипулирования ресурсами мы часто используем Эти методы JS (Рекомендуется), например .map () , .Filter () и .Ра () Отказ
Вот что мы обратим
- Работа с асинхронными HTTP-запросами JS
- Что такое ajax?
- Почему fetch api?
- Быстрое введение для получения API
- Fetch API – Crud Trives ← хорошая вещь!
1. Работа с асинхронными HTTP-запросами JS
Одной из самых сложных деталей с пониманием того, как работает JavaScript (JS), является понимание того, как справиться с асинхронными запросами, которые требуют и понимают, как работают обещания и обратные вызовы.
На большинстве языков программирования мы подключены к тому, что операции случаются в порядке (последовательно). Первая строка должна быть выполнена до того, как мы сможем перейти к следующей строке. Это имеет смысл, потому что именно мы люди работают и завершают ежедневные задачи.
Но с JS у нас есть несколько операций, которые работают на фоновом режиме/переднем плане, и мы не можем иметь веб-приложение, которое замерзает каждый раз, когда он ждет пользователя.
Тем не менее, иногда вещи должны случиться по порядку, в противном случае это приведет к хаосу и неожиданным результатам. По этой причине мы можем использовать обещания и обратные вызовы, чтобы структурировать его. Примером может быть подтверждает учетные данные пользователя, прежде чем перейти к следующей операции.
2. Что такое ajax
AJAX означает Asynchronous JavaScript и XML, и он позволяет веб-страницам обновляться асинхронно, путем обмена данными с веб-сервером во время работы приложения. Короче говоря, это, по сути означает, что вы можете обновить части веб-страницы без перезагрузки всей страницы (URL остается прежним).
Ajax весь путь?
Я видел, что многие разработчики, как правило, очень взволнованы, чтобы иметь все в одном странице приложение (SPA), и это приводит к большому количеству асинхронной боли! Но, к счастью, у нас есть библиотеки, такие как угловые, Vuejs и реагируют, что делает этот процесс в целом легче и практично.
В целом, важно иметь баланс между тем, что должно перезагрузить всю страницу или части страницы.
И в большинстве случаев перезагрузка страницы работает нормально с точки зрения того, насколько мощными браузерами стали. Вернуться в те дни, перезагрузка страниц потребуется секунды (в зависимости от расположения возможностей сервера и браузера). Но сегодняшние браузеры чрезвычайно быстры, так что решить, следует ли выполнять перезагрузку AJAX или страницы, не значительная разница.
Мой личный опыт заключается в том, что это намного проще и быстрее создать поисковую систему с простой кнопкой поиска, чем это без кнопки. И в большинстве случаев клиент не заботится, если он является спа или дополнительной страницей. Конечно, не поймите меня неправильно, я люблю SPA, но нам нужно рассмотреть пару компромиссов, если мы имеем дело с ограниченным бюджетом и отсутствием ресурсов, то, возможно, быстрое решение лучше.
В конце концов, это действительно зависит от случая использования, но лично я чувствую, что SPA требуется больше времени разработки и немного головной боли, чем простая страница перезагрузки.
3. Зачем получать API?
Это позволяет нам выполнять декларативные HTTP-запросы на сервер. Для каждого запроса он создает Обещание который должен быть разрешен для определения типа содержимого и доступа к данным.
Теперь преимущество Fetch API заключается в том, что он полностью поддерживается экосистемой JS, а также является частью MDN Mozilla Docs Отказ И последнее, но не менее важно, он работает из коробки в большинстве браузеров (кроме IE). В долгосрочной перспективе я предполагаю, что это станет стандартным способом вызовов веб-API.
4. Быстрый введение для получения API
fetch () Метод возвращает Обещание это решает Ответ от Запрос показать статус (успешно или нет). Если вы когда-нибудь получите это сообщение Обещание {} В вашем экране журнала консоли, не паникуйте – в основном это означает, что Обещание Работает, но ждет, чтобы быть решен. Поэтому для того, чтобы решить это, нам нужны .then () обработчик (обратный вызов) для доступа к содержимому.
Так что короче говоря, мы сначала определим путь ( fetch ), вторых запрос данных с сервера ( запрос ), в-третьих, определите тип содержимого ( тело ) и последнее, но не менее важно, мы Доступ к данным ( ответ ).
Если вы боретесь, чтобы понять эту концепцию, не волнуйтесь. Вы получите лучший обзор через примеры, показанные ниже.
The path we'll be using for our examples https://jsonplaceholder.typicode.com/users // returns JSON
5. Fetch API – HTTP-примеры
Если мы хотим получить доступ к данным, нам нужно два .then () обработчики (обратный вызов). Но если мы хотим манипулировать ресурсом, нам нужен только один .then () обработчик. Однако мы можем использовать второй, чтобы убедиться, что значение было отправлено.
Базовый шаблон PRETCH API:
Примеры Petch API
- Показывая пользователя
- Показывая список пользователей
- Создание нового пользователя
- Удаление пользователя
- Обновление пользователя
1. Показаны пользователю
Как уже упоминалось ранее, процесс отображения одного пользователя состоит из двух .then () обработчики (обратный вызов), первый для определения объекта, а второй для доступа к данным.
Пример
2. показывая список пользователей
Пример практически идентичен предыдущему примеру, за исключением того, что строка запроса – /пользователи , а не /Пользователи/2 Отказ
Пример
3. Создание нового пользователя
Этот выглядит немного отличается от предыдущего примера. Если вы не знакомы с HTTP-протоколом, он просто предоставляет нам пару сладких методов, таких как Пост , Получить , Удалить , Обновить , Патч и Поставить Отказ Эти методы представляют собой глаголы, которые просто описывают выполнение типа действий, и в основном используются для манипулирования ресурсами/данными на сервере.
В любом случае, для того, чтобы создать новый пользователь с API Fetch, нам нужно будет использовать http verb Пост Отказ Но сначала нам нужно где-то определить. К счастью, есть дополнительный аргумент Init Мы можем пройти вместе с URL для определения пользовательских настроек, таких как тип метода, тело, учетные данные, заголовки и так далее.
Пример
4. Удаление пользователя
Чтобы удалить пользователя, мы сначала нацелены на пользователь с помощью /пользователи/1 , а затем мы определяем тип метода, который является Удалить Отказ
Пример
5. Обновление пользователя
HTTP VERB Поставить Используется для манипулирования целевого ресурса, и если вы хотите делать частичные изменения, вам нужно использовать Патч Отказ Для получения дополнительной информации о том, что делают эти HTTP глаголов, Проверьте это Отказ
Пример
Заключение
Теперь у вас есть базовое понимание того, как получить или манипулировать ресурсом с сервера, используя API JavaScript, а также как иметь дело с обещаниями. Вы можете использовать эту статью в качестве руководства для того, чтобы структурировать ваши запросы API для операций CRUD.
Лично я чувствую, что API Fetch является декларативным, и вы можете легко понять, что происходит без какого-либо опыта технического кодирования.
Вот несколько статей, которые я написал о веб-экосистеме вместе с личными советами и трюками программирования.
- Сравнение между угловым и реагированным
- Хаотичный ум приводит к хаотическому коду
- Разработчики, которые постоянно хотят выучить новые вещи
- Практическое руководство по модулям ES6
- Узнайте эти основные веб-концепции
- Повысьте свои навыки с этими важными методами JavaScript
- Программа быстрее, создавая пользовательские команды Bash
Вы можете найти меня на среднем, где я публикую еженедельно. Или вы можете следовать за мной на Twitter Где я публикую соответствующие советы по разработке веб-разработки вместе с личными историями.
Снимание Если вам понравилось эту статью и хочется больше подобных этим, пожалуйста, хлопайте ❤ и поделитесь с друзьями, которые могут понадобиться, это хорошая карма.