Еще одна очень распространенная задача на современных веб-сайтах и в приложениях - получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загружать новую страницу целиком. - MDN
Привет! Так часто, чем я собираюсь признать, на интерфейсной сцене мы либо извлекаем (выполняем запрос GET) из веб-службы, либо создаем ресурс в веб-службе (POST, PATCH , и т. д.). Звучит знакомо? Бьюсь об заклад, это так.
Старый добрый объект XMLHttpRequest - AJAX.
В эпоху минимальной загрузки страницы большая часть нашей «выборки» на стороне клиента выполнялась асинхронно, и это стало популярным благодаря AJAX.
Psst: AJAX означает асинхронный JavaScript и XML.
Итак, используя AJAX, и вы хотите, скажем, получить информацию о конкретном пользователе (скажем, DominusKelvin) из REST API GitHub, вы должны сделать что-то вроде этого на клиенте:
Введите Fetch () - правильно названо, верно? 😉
Так что, без сомнения, Ajax - это круто, было действительно потрясающе, когда я впервые узнал о нем, но еще круче fetch ():
Fetch API предоставляет интерфейс для получения ресурсов (в том числе по сети). Это покажется знакомым любому, кто использовал
XMLHttpRequest, но новый API предоставляет более мощный и гибкий набор функций. - MDN
Что fetch приносит в таблицу (отрывок из MDN)
- Fetch предоставляет общее определение объектов
RequestиResponse(и других вещей, связанных с сетевыми запросами). Это позволит использовать их везде, где они понадобятся в будущем, будь то сервис-воркеры, Cache API и другие подобные вещи, которые обрабатывают или изменяют запросы и ответы, или любой вариант использования, который может потребовать от вас создания собственных ответов. программно. - Он также предоставляет определение связанных понятий, таких как CORS и семантика исходного заголовка HTTP, заменяя их отдельные определения в других местах.
Это означает, что программа fetch предназначена для «загрузки» 😉. Он широко использует обещания от ES6, а синтаксис намного чище и СУХОЙ по сравнению с AJAX.
Вернемся к загрузке меня из Github 😁
Итак, мы увидели, как сделать GET-запрос, используя старый добрый AJAX, верно? Давайте посмотрим, как fetch может выполнять ту же операцию, не так ли? Давай, принеси ()!
Or
😎 Вы могли видеть, насколько он компактнее и чище. Так что же здесь происходит, спросите вы? Таким образом, объект выборки принимает один обязательный аргумент, который является URL для ресурсов, которые вы хотите «извлечь», а затем возвращает обещание, содержащее ответ (если все идет хорошо). Ответ, возвращенный в этом обещании, пока не может быть использован, поэтому вы должны указать fetch () дать вам ответ в стиле JSON (также может потребоваться, чтобы он был другие форматы. Но разве JSON не популярен?) с этим битом response.json ().
response.json () также возвращает обещание, которое содержит ответ на ваш запрос в формате JSON. Наконец, мы обрабатываем ошибки с помощью блока / цепочки catch.
Psst: fetch довольно подробно документирован, и вы можете увидеть все подробности, когда посмотрите на него. Для этого оставлю несколько витаминов.
Заключение
Вот и все, теперь у вас есть еще один механизм, который вы можете использовать в своей задаче получения, который довольно часто используется на клиенте (глядя на SPA).
Разработчик Vitamins
Удачного развертывания 🚀 🚀 🚀
