Руководство для начинающих по Fetch API в JavaScript
В этом кратком руководстве я хотел бы познакомить вас с методом fetch (). Хотя в Интернете есть много полезной и надежной информации о том, как использовать и извлекать данные из API, я написал это руководство для новичков, чтобы продемонстрировать, что происходит, когда выполняется определенная часть метода выборки, и устранить этот пробел между тем, что записывается в вашем файле script.js и отображается в консоли разработчика любого браузера.
Давай запачкаем руки!
Как всегда, давайте взглянем на официальную Веб-документацию MDN и прочитаем ее:
Метод fetch () миксина WindowOrWorkerGlobalScope запускает процесс выборки ресурса из сети, возвращая обещание, которое выполняется, как только отклик становится доступным. Обещание преобразуется в объект Response, представляющий ответ на ваш запрос. Обещание не отклоняется при ошибках HTTP - оно отклоняется только при ошибках сети. Вы должны использовать обработчики then для проверки ошибок HTTP.
Хотя это определение может показаться немного сложным, в нем излагаются ключевые термины, с которыми нам следует ознакомиться, и вы сможете понять их все к концу этой статьи. Вот эти ключевые термины:
- Ресурс
- Ответ
- Обещать
- Выполнено или отклонено
Вот синтаксис метода fetch ():
const fetchResponsePromise = fetch(resource [,init])
Ресурс - он определяет ресурс, который вы хотите получить / большую часть времени это просто ссылка на удаленный ресурс.
Init (необязательно) - объект, содержащий любые пользовательские настройки, которые вы хотите применить к запросу. По умолчанию метод выборки отправляет запрос GET.
Готовимся!
В целях обучения мы собираемся использовать общедоступный API под названием icanhazdadjoke. Этот API можно использовать в качестве API для получения случайной шутки, конкретной шутки или поиска шуток в различных форматах.
Создайте простой стандартный HTML-документ и напишите следующий код в файле script.js, чтобы настроить настраиваемый заголовок User-Agent для всех запросов, которые мы собираемся получать, как указано в документации API:
// API path/ link to search for random jokes
const resource = 'https://icanhazdadjoke.com'
// this is a config var to fetch data per API instructions/needs to go to header
const init = {
headers: {
Accept: 'application/json',
}}
Обычный запрос на выборку выглядит примерно так:
fetch("a string to a URL to get data")
.then(function(response) {return response.json();})
.then(function(json){
// Use the data inside of "json" to do some magic manipulation!})
Хорошо, давайте разделим этот запрос на получение трех простых шагов, как я и обещал ранее!
ШАГ 1. Обещающий ответ.
Напишите следующий код в свой файл JavaScript, запустите код в консоли браузера и просмотрите вывод в консоли.
const result = fetch(resource, init) console.log(result);
Мы вызываем «fetch ()» и передаем URL-адрес источнику данных и инициализируем данные конфигурации в качестве аргументов для получения данных из API. Удивительно, но если развернуть этот ответ полностью вниз, в нем не будет никакого содержания !? Никаких шуток, никаких данных в формате JSON, ничего, это не похоже на то, что мы могли ожидать, основываясь на документации API. Ну, это происходит потому, что этот вызов функции возвращает объект, который представляет то, что источник данных отправил нам, но НЕ фактическое содержимое. Этот объект называется Promise - Promise {‹pending›} и имеет следующие параметры: [[PromiseResult]]: Response и [[PromiseState]]: « выполнено »; Выполнено означает, что ответ был успешным. Когда что-то не так, напротив [[PromiseState]] появляется состояние «Отклонено», я продемонстрирую это позже.
ШАГ 2. Преобразование данных.
Что ж, если мы ничего не можем сделать с этими данными, в чем смысл? Логическим решением было бы преобразовать эти данные во что-то полезное для нас. Введите и запустите следующий код в консоли браузера:
const init = {
headers: {
Accept: 'application/json',
}}
const result = fetch(resource, init)
.then(function (res) {return console.log(res.json());})
Как только мы получаем этот объект ответа от «fetch ()», мы вызываем метод «then ()» для этого объекта и передаем объект в качестве аргумента в функцию обратного вызова. Внутри функции обратного вызова мы делаем все, что нам нужно, с объектом, но большую часть времени мы конвертируем его в JSON с помощью встроенного метода «json ()». Затем мы возвращаем ответ JSON. Нам также необходимо вернуть контент, который мы получили из ответа и преобразовали в JSON, чтобы использовать эти данные во втором методе then (). В целом, цель этого первого метода «then ()» - вернуть содержимое из исходного ответа после его преобразования в нужный мне формат, в данном случае формат JSON.
Взгляните на этот возвращенный объект Promise {‹pending›}, у него есть [[PromiseResult]]: Object, а не «Response» как в ШАГЕ 1, [[PromiseState]]: «выполнено» означает отсутствие проблем и, более того, на самом деле отображается идентификатор и сама шутка, в зависимости от случайная шутка, которую вы получите от API, ваш вывод может выглядеть так:
id: “nOfNJY89EBd” joke: “Without geometry life is pointless.” status: 200
Поздравляю! Первоначальный ответ был преобразован в объект типа JSON, который имеет свойства, как указано в документации API, мы в порядке!
Как я обещал ранее, можем ли мы имитировать отклоненный ответ? Напишите следующий код (-1 вместо JSON в заголовке init var или что-нибудь еще, что вы хотите его остановить). Если вы это сделаете, он вернет состояние «Отклонено».
const init = {
headers: {
Accept: 'application/-1',}}
const result = fetch(resource, init)
.then(function (res) {return console.log(res.json());})
ШАГ 3. Реальные дела.
Мы узнали, что первый метод then () преобразует ответ в объект типа JSON, который должен позволить нам выполнять некоторые манипуляции. Как мы можем сделать это? Мы используем второй метод then ()! Мы берем объект типа JSON в параметре и передаем его во вторую функцию обратного вызова, где мы можем писать все, что хотим, для обработки данных, которые мы получаем от API. Для простоты давайте просто распечатаем случайную шутку, которую мы получили от этого общедоступного API - для этого напишите console.log (data) во втором методе then ().
const result = fetch(resource, init)
.then(function (res) {return res.json();})
.then (function(data) {return console.log(data)})
Ваш результат может выглядеть примерно так, как показано ниже, в зависимости от полученной шутки. Оно работает!
Чтобы сделать вывод более читабельным, мы можем добавить строку «Это случайная шутка из общедоступного API:» (здесь случайная шутка).
const result = fetch(resource, init)
.then(function (res) {return res.json();})
.then (function(data) {return console.log("This is a random joke from public API: " + data.joke)})
Если вы найдете эту информацию полезной, подписывайтесь на меня. Надеюсь, вам понравилось это краткое руководство по Fetch in JavaScript, будьте сильны и следите за обновлениями!
Больше контента на plainenglish.io
