Как использовать fetch() в Javascript для начинающих

Что такое выборка()

Функция fetch() собирает данные. Это глобальный метод, который можно использовать с объектом window. Это означает, что мы можем использовать его, вызвав fetch() и передав URL-адрес ресурса в качестве аргумента. Чтобы использовать данные, возвращаемые функцией fetch(), нам нужно связать метод then().

Использование PokeApi с функцией fetch()

Как показано выше, для извлечения требуется ссылка или путь, чтобы он мог ПОЛУЧАТЬ ресурсы откуда-то, например, из интерфейса прикладного программирования (API). В нашем примере мы используем PokeAPI. По умолчанию функция fetch() использует метод GET, но есть и другие способы использования выборки.

Первая часть .then() нашего кода

В этом примере в первом then() мы создаем анонимную функцию с помощью стрелки, и мы передаем «res» в качестве аргументов. Это можно назвать как угодно, но в основном мы получаем ответ от fetch, а затем передаем его в качестве аргументов в нашу функцию обратный вызов.

res.json()

Метод json() возвращает обещание, которое разрешается с результатом анализа основного текста как JSON. Результатом является не JSON, а результат использования JSON в качестве входных данных и его анализа для создания объекта JavaScript.

Вторая часть кода .then()

Во втором then() мы передаем данные в нашу анонимную функцию, которую мы получили от нашей первой then(), которую мы теперь можем использовать как объект, потому что это то, чем он является сейчас благодаря json(). Опять же, нам не нужно использовать dataObject в качестве аргумента, его можно назвать как угодно. Мы назвали его dataObject просто для нашего примера, чтобы отслеживать, что происходит через нашу функцию.

Теперь мы должны получить успешный console.log объекта, который был возвращен нашей fetch() и двумя нашими then( ) использует PokeApi.

Присмотревшись дальше, мы видим, что теперь у нас есть массив из 20 объектов покемонов, которые мы теперь можем использовать как мы хотим поблагодарить наши функции fetch() и then()

Если вы введете ссылку, которую мы используем в нашем примере, https://pokeapi.co/api/v2/pokemon/», мы увидим данные, которые мы получаем из нашей выборки, записанные в JSON на этой веб-странице. Именно отсюда мы получаем наши данные, когда используем fetch() в этом примере. Он очень похож на object в Javascript, в основном просто обозначенный строками с кавычками.

.ловить()

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

Поздравляем! Теперь вы знаете, как использовать fetch(). Хотя есть и другие способы использования fetch(), это должно дать вам надежную отправную точку.