Глобальный метод fetch(), предоставляемый Fetch API, «представляет собой простой и логичный способ асинхронного получения ресурсов по сети».

Самое простое использование fetch() принимает один аргумент — путь к ресурсу, который вы хотите получить — и возвращает обещание, содержащее ответ.

Вот базовый запрос на выборку:

Когда мы получаем «обещание {}» на экране журнала консоли, это означает, что обещание работает, но ожидает разрешения. Здесь мы должны использовать обратный вызов «.then» для доступа к данным.

Так что же происходит в коде Fetch?

Функция «fetch()» возвращает объект, представляющий то, что источник данных отправил обратно. Он не возвращает фактическое содержимое.

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

Возвращаемое значение используется в следующей функции «.then()» — последнее «.then()» — это когда мы передаем JSON.

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

Вызов 1

  • Эта практика включает в себя файл index.html, который загружает файл index.js, нам нужно добавить javascript, чтобы при загрузке страницы извлекались изображения с использованием заданного URL-адреса, анализировался ответ как JSON и добавлялись элементы изображения в DOM для каждого изображения в множество.

Вызов 2

  • После того, как первая задача завершена, мы добавляем javascript, чтобы при загрузке страницы извлекать все породы собак, используя заданный URL-адрес, и добавлять породы на страницу в ‹ul›.

Вызов 3

  • Когда все породы будут отображены в <ul>, добавьте javascript, чтобы цвет шрифта конкретного <li> менялся при нажатии. Когда пользователь щелкает любой элемент списка пород собак, цвет текста должен измениться.

Вызов 4

  • Как только мы сможем загрузить все породы собак на страницу, добавьте javascript, чтобы пользователь мог фильтровать породы, которые начинаются с определенной буквы, используя раскрывающийся список.

Вывод

Используя fetch(), мы можем включать запросы данных в любом месте нашего кода. Мы можем fetch() данные по нажатию кнопки или расширению дисплея аккордеона. Есть много старых методов получения данных, но будущее за fetch().