Fetch API - это одно слово, которое я всегда слышал, когда его бросали. Если вам никогда не приходилось с этим работать или вы даже не знаете, что это значит, это кажется чем-то большим, чем-то, к чему мы не можем иметь отношения, или даже чем-то чрезвычайно сложным. Ну что ж, это неправда, и я здесь, чтобы сказать вам это.
Начнем с того, что означают API.
Согласно Википедии, интерфейс прикладного программирования (API) - это вычислительный интерфейс, который определяет взаимодействие между несколькими программными посредниками.
С другой стороны, Fetch - это способ извлечения удаленных данных внутри вашей веб-страницы с помощью функции fetch (). Fetch API предоставляет интерфейс для извлечения ресурсов (в том числе по сети). Fetch API предоставляет метод, который мы можем использовать для выполнения запросов. Этот предоставленный метод затем возвращает Promise, который можно использовать для получения ответа на отправленный нами запрос.
Метод выборки имеет только один обязательный аргумент, есть и другие аргументы, но обязательным является URL ресурса, который вы хотите получить. Это может быть URL-адрес веб-сайта, с которого вы хотите сделать запрос. Это не должно быть трудным, потому что эти URL-адреса или ссылки уже предоставлены на веб-сайтах или в местах, откуда мы пытаемся делать запросы.
Примером такого URL-адреса является URL-адрес API openweathermap
Https://api.openweathermap.org/data/2.5/weather?q=lagos&appid={api key}
Основной способ сделать запрос на выборку с использованием этого URL-адреса - это сделать что-то вроде этого:
fetch( https://api.openweathermap.org/data/2.5/weather?q=lagos&appid={api key} ) .then(response => response.json( )) .then(json => console.log(response.json( ))
В строке выше я делаю запрос о погодных условиях в лагосе из openweathermap с использованием синтаксиса .then ().
После запроса на выборку я решил отобразить ответ в своей консоли, это то, что означает console.log.
Другой способ сделать тот же запрос - использовать синтаксис async / await. Этот синтаксис был введен в ES2017 и очень удобен. Пометка функции как асинхронной означает, что мы можем дождаться ее ответа, используя синтаксис await, а когда мы получим ответ, мы можем использовать его по своему усмотрению.
Вот как это выглядит
weather = async () => {
const response = await fetch( https://api.openweathermap.org/data/2.5/weather?q=$lagos&units=metric&appid=${api.key}`
)
const myJson = await response.json();
} weather();
Вы можете сделать что угодно со своим ответом. Вы можете использовать его на веб-странице или изменить HTML-страницу по вашему выбору. Есть бесконечная возможность что-то сделать с данными ответа.
Типичный погодный ответ openweathermap выглядит так:
{
“lat”: 40.12,
“lon”: -96.66,
“timezone”: “Africa/Lagos”,
“timezone_offset”: -18000,
“weather”: [
{
“id”: 501,
“main”: “Rain”,
“description”: “moderate rain”,
“icon”: “10n”
}
}
Если вы посмотрите на асинхронную функцию выше, вы заметите, что я назвал ответ «myJson», это простой способ получить доступ к ответу в других разделах моей работы и позже.
Если я хочу получить доступ к широте из json, отправленного в качестве ответа от openweathermap, мне просто нужно будет ввести «myJson.lat», как и долготу, мне просто нужно будет ввести «myJson.lon» и вуаля !! У меня есть долгота этого места.
Как я уже говорил выше, ответы на запросы на выборку можно использовать для различных целей, давайте попробуем здесь одну из таких вещей:
Мы попытаемся присвоить элементу текущие погодные условия, полученные из нашего запроса.
Назовем элемент currentWeather и сделаем его содержимое погодным условием. Из нашего ответа.
currentWeather.innerHTML = myJson.weather.main;
Теперь, когда мы смотрим на содержимое currentWeather, оно отображает «дождь».
В основном это то, как использовать API выборки в JavaScript для выполнения запроса, а также как получить доступ к возвращенному ответу.
Мы подошли к концу этой статьи, чтобы узнать больше о Fetch, вы можете проверить эти ссылки ниже. 👇
"Принести"
