В JavaScript есть много вариантов выполнения запросов к внешним ресурсам. Вы можете использовать встроенный метод XMLHttpRequest. Вы также можете использовать множество библиотек, таких как jQuery и .ajax(), или вы также можете использовать Axios.
Но в этом посте я буду говорить о новом JavaScript fetch API. Обратите внимание, что это поддерживается только более новыми версиями Chrome, Firefox, Edge, Safari, Opera и вообще не поддерживается Internet Explorer. Вот почему было бы неплохо использовать Babel с вашим проектом JavaScript, если вы еще этого не сделали.
Сначала я рассмотрю самый простой пример использования fetch, затем я также рассмотрю его использование с новым способом обработки запросов async/await.
Самый простой способ обработки запроса на выборку — начать с метода fetch() и передать URL-адрес ресурса в качестве опции, например:
fetch('https://jsonplaceholder.typicode.com/todos/1')
Следующая часть — это метод .then, который возвращает результат промиса, настроенный следующим образом:
Быстрый метод перенастройки JSON из ответа — добавить еще один метод .then, выполняющий следующие действия:
Вы также можете использовать выборку для публикации данных. Вы бы сделали это, добавив объект конфигурации после URL-адреса, который включает параметр метода, параметр заголовка и параметр тела, который представляет публикуемые данные. Это можно сделать следующим образом:
В этом примере я отправляю объект JSON, содержащий значение имени пользователя, в конечную точку.
Другой способ использования выборки для получения данных — это асинхронные функции с ключевым словом await. Большинство современных браузеров поддерживают это, но, как я уже говорил, вам лучше использовать Babel в своем проекте, если вы собираетесь его использовать.
Для этого есть 2 основные части. Первая часть — это ключевое слово async, которое вы размещаете перед функцией, в которой хотите его использовать. Вторая часть — это ключевое слово await, которое используется в асинхронной функции. Ключевое слово await можно использовать при вызове функции, возвращающей обещание, например fetch. Вы можете использовать его следующим образом:
Если вы хотите обрабатывать ошибки, вы также можете использовать структуру захвата лотка. Это покажет любые ошибки, которые вы получаете при попытке получить свой ресурс. Эта структура будет выглядеть следующим образом:
Это сделает так, что если по какой-то причине ваш ресурс не может быть извлечен, ваш JavaScript не выдаст ошибку с блоком try/catch.
Это основы использования JavaScript fetch API для получения внешних ресурсов. Я использовал это с методом .then, а также с асинхронным/ожидающим способом обработки промисов.
Подробнее о fetch можно узнать здесь. Вы можете узнать больше об асинхронной функции JavaScript здесь.
