Давайте представим, что вы просыпаетесь и решаете создать приложение для принятия решений нового поколения. Ваша идея проста: вы задаете сайту вопрос, и каждый раз, когда вы перезагружаете страницу, вы должны случайным образом получить ответ «Да» или «Нет». Наконец-то что-то, что поможет вам принимать трудные решения!
К счастью, есть API, который может сделать именно это. Веб-сайт yesno.wtf случайным образом скажет вам Да или Нет (и редко Возможно в соответствии с описанием их API). В дополнение к этому, он также дает вам URL-адрес изображения GIF, связанный с предоставленным ответом.
Но подождите, Хелдер, а не можем ли мы сами использовать рандомизацию «Да» и «Нет»?
Верно, и именно поэтому этот API великолепен. Чрезвычайно простой API — его лучшее преимущество — идеально подходит для изучения основ выборки.
Вот чего мы пытаемся добиться (попробуйте перезагрузить страницу):
https://helderesteves.com/other/fetching-javascript-the-definitive-guide/
Создание необходимых HTML-элементов
Давайте посетим yesno.wtf и посмотрим, что отвечает их API, когда вы делаете GET-запрос:
{
"answer": "yes",
"forced": false,
"image": "https://yesno.wtf/assets/yes/2.gif"
}
Это пример того, что вы получите, отправив запрос в формате JSON, поэтому давайте просто сосредоточимся на этом ответе. Глядя на него, у нас есть два элемента, которые мы хотим использовать: ответ и изображение.
Давайте создадим немного HTML:
<strong>Should I order a pizza today?</strong> <p id="answer"></p> <img id="gif" src="" />
Хотя первый элемент не нужен для этого урока, он делает его более интересным для изучения 🙂 Если вы еще не заметили, есть пустые места, такие как элемент ответа и элемент gif img. Вот где произойдет волшебство.
Итак, давайте подключим приведенный выше ответ непосредственно к элементам, например так:
<strong>Should I order a pizza today?</strong> <p id="answer">yes</p> <img id="gif" src="https://yesno.wtf/assets/yes/2.gif">
Примечание. Все, что я сделал, это скопировал и вставил, больше ничего не требовалось.
Однако каждый раз будет отображаться один и тот же ответ и изображение (вы не должны есть пиццу каждый день). Войди за добычей, твой спаситель.
Преуменьшение получения
Извлечение немного похоже на диалог. Когда мы получаем из API yesno.wtf, происходит следующий диалог:
- Эй, yesno.wtf, брат мой, поколдуй и дай мне случайно сгенерированный ответ — спрашивает твой сайт (через GET-запрос)
- Раз уж ты хорошо попросила, я верну тебе это, — отвечает yesno.wtf
{
"answer": "yes",
"forced": false,
"image": "https://yesno.wtf/assets/yes/2.gif"
}
Получение ответов
Извлечение из API в JS чрезвычайно просто. Это все, что нужно:
fetch("https://yesno.wtf/api")
Удивлен? fetch() по умолчанию делает запрос GET к выбранному вами URL-адресу, так что все в порядке. Однако делать это все равно, что пойти в Starbucks, заказать латте и ничего с ним потом не делать. Какая пустая трата времени, верно? При извлечении нужно учитывать две вещи: либо вы получаете то, что запрашивали, либо получаете сообщение об ошибке.
Имея это в виду, давайте добавим больше кода в строку выше:
fetch("https://yesno.wtf/api")
.then(function (response) {
console.log(response); // Perfect, we got our response
})
.catch(function (error) {
console.error(error); // An error occurred while fetching
});
Можете ли вы угадать общую идею этого кода? Это то, о чем мы говорили ранее. Пройдите строку за строкой и попытайтесь понять, что это значит, потому что так вещи застревают в вашей голове.
Примечание: fetch позволяет передавать различные параметры. Это основное руководство по использованию fetch. Для получения дополнительной информации ознакомьтесь с официальной документацией.
Обработка ответа от выборки
Давайте сосредоточимся на части кода выше then. Что содержит «ответ» в …функция (ответ)…? Итак, если вы выполните приведенный выше код и проверите его, это будет объект, который выглядит так:
{
"type": "cors",
"url": "https://yesno.wtf/api",
"redirected": false, "status": 200,
"ok": true,
"body": ReadableStream,
(...)
}
Хм… это не похоже на то, что мы искали. Где объект, который нам обещали от yesno.wtf!? Они обманули нас? Оказывается, нужные нам данные находятся там, нам просто нужно выбрать, каким образом мы хотим представить ответ.
Мы можем использовать следующие свойства из response:
- response.text() — отображает данные как текст
- response.json() — отображает данные в виде объекта JSON (то, что мы ищем в данном случае)
- response.formData() — отображает данные в виде объекта FormData
- response.blob() — отображает данные в виде объекта Blob
- response.arraybuffer() — отображает данные в виде объекта ArrayBuffer
Примечание. Для получения дополнительной информации о том, что делает каждое из этих свойств, ознакомьтесь с официальной документацией MDN по объекту Response.
Итак, какой из них мы должны выбрать? response.json() похоже на то, что мы ищем, верно? При этом давайте добавим еще немного кода к тому, что у нас было раньше:
fetch("https://yesno.wtf/api")
.then(function (response) {
return response.json(); // response.json() is asynchronous, so we need to chain another "then" to get what we want
})
.then(function (data) {
console.log(data); // { "answer": "yes", "forced": false, (...) }
})
.catch(function (error) {
console.error(error); // An error occurred while fetching
});
Примечание. Если вам интересно, почему нам нужно связать еще один .then с кодом выше, посмотрите, как это работает. Он возвращает Promise, поэтому его нужно обрабатывать асинхронно, как и выше. Если это слишком сложно понять, не волнуйтесь, пока вам это не нужно.
Потрясающий! У нас есть все необходимые элементы. Чего не хватает? Вывод данных в элементы, которые мы создали в HTML. Но сначала давайте сделаем небольшое упражнение, чтобы посмотреть, как у вас пока идут дела.
Упражнение 1:
Что должно быть в пунктах A, B и C?
Постарайтесь кратко описать, что должно быть в каждом из этих разделов.
fetch(A).then(B)
.then(function (data) { console.log(data); })
.catch(C);
Решение (не прокручивайте вниз):
A: URL для извлечения (+ необязательные параметры для передачи в качестве опций операции извлечения)
B: функция, которая получает ответ (если выборка прошла успешно) и возвращает ответ в том виде, в котором мы хотим его прочитать.< br /> C: функция, которая перехватывает ошибку (если выборка не удалась)
Вывод данных в HTML
Эта часть посвящена манипулированию DOM. Поскольку это руководство посвящено выборке в JS, я не буду говорить о том, как манипулировать DOM.
Давайте еще раз посмотрим, чего мы пытаемся достичь (скопировано из «Создание необходимых элементов HTML)»:
<strong>Should I order a pizza today?</strong> <p id="answer"></p> <img id="gif" src="">
Хм, значит, нам нужно заставить fetch() добавить текст к элементу #answer и в то же время добавить URL-адрес изображения в src элемента #gif.
Давайте еще раз взглянем на данные, которые мы получаем от API:
{
"answer": "yes",
"forced": false,
"image": "https://yesno.wtf/assets/yes/2.gif"
}
При этом нам просто нужно каким-то образом скопировать « ответ» и « изображение » в каждый элемент HTML, как мы делали раньше вручную. Здорово! *манипуляции с DOM входят в чат*
Упражнение 2:
Где мы должны манипулировать DOM?
Попробуйте сделать вывод, где мы должны поместить «ответ» и «изображение» из данных API в элемент HTML.
fetch("https://yesno.wtf/api")
.then(function (response) {
A
})
.then(function (data) {
B
})
.catch(function (error) {
C
});
Решение:
B. A — это место, где мы преобразуем ответ в нужный формат, а C — это место, где вы управляете ошибкой.
Собираем все вместе
Со всем, что я сказал до сих пор, давайте напишем окончательный код:
fetch("https://yesno.wtf/api")
.then(function (response) {
return response.json();
})
.then(function (data) {
document.getElementById("answer").textContent = "Answer: " + data.answer;
// TODO: Complete the code by replacing this with the image manipulation
})
.catch(function (error) {
console.error(error);
});
«Подождите, а как насчет части изображения!?» — спросите вы, недоумевая
Как вы можете видеть в комментарии выше, разве это не идеальное время для упражнений?
Упражнение 3:
Заполните код, заменив комментарий выше
Взгляните на строку над комментарием и сделайте что-то похожее на элемент изображения.
Решение:
fetch("https://yesno.wtf/api")
.then(function (response) {
return response.json();
})
.then(function (data) {
document.getElementById("answer").textContent = "Answer: " + data.answer;
document.getElementById("gif").src = data.image;
})
.catch(function (error) {
console.error(error);
});
Круто, ты дошел до конца. Прекрасная работа. Время для пиццы?
Если у вас есть какие-либо вопросы или комментарии, пожалуйста, оставьте их ниже, я отвечу, насколько смогу.
