Как подключиться к API (Async, Await, Fetch)

👋 Сегодня я покажу вам, как подключиться к API, используя Async, Await и Fetch, для этого мы будем использовать PokeAPI api, потому что это бесплатный API.

Начало проекта

Сначала я рекомендую вам создать небольшой проект с HTML и JavaScript, чтобы мы могли визуализировать в браузере ответы API.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Conectar API</title>
</head>
<body>
  <h1>Como conectar una API</h1>
  <p>Veremos como conectar una API utilizando Async, Await y Fetch</p>

  <script src="main.js"></script>

</body>
</html>
Войдите в полноэкранный режим Выход из полноэкранного режима

main.js

console.log('Hello World!')
Войдите в полноэкранный режим Выход из полноэкранного режима

Подключение к API

Теперь, когда у нас готовы файлы, давайте перейдем в PokeAPI и скопируем следующую ссылку:

Мы создадим функцию в нашем main.js под названием callingApi и вызовем ее для запуска.

const llamandoApi = () => {
  console.log('Hello World')
}

llamandoApi()
Войдите в полноэкранный режим Выход из полноэкранного режима

Теперь мы будем использовать fecth для вызова API, и сохраним его в константе response, но так как он асинхронный, мы должны использовать await, всякий раз, когда мы используем await в нашей функции, она должна идти async, чтобы не сгенерировать ошибку, если мы не поместим await в promise, мы увидим что-то вроде этого:

Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Object
Войдите в полноэкранный режим Выход из полноэкранного режима

Теперь мы выполним вызов API:

const llamandoAPI = async () => {
  const respuesta = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')
  console.log(respuesta)
}

llamandoAPI()
Войдите в полноэкранный режим Выход из полноэкранного режима

Теперь, если вы перейдете в браузер, вы увидите что-то вроде этого:

Response {type: 'cors', url: 'https://pokeapi.co/api/v2/pokemon?limit=20&offset=0', redirected: false, status: 200, ok: true, …}
Войдите в полноэкранный режим Выход из полноэкранного режима

Теперь, чтобы проверить этот вызов в случае ошибки, мы используем try catch.

const llamandoAPI = async () => {
  try {
    const respuesta = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')
    console.log(respuesta)
  } catch (error) {
    console.log(error);
  } 
}

llamandoAPI()
Войдите в полноэкранный режим Выход из полноэкранного режима

Это позволит нам проверить ответ на API, что предотвратит поломку нашего приложения.

Доступ к данным

Теперь, когда у нас есть ответ, мы хотим использовать данные, для этого мы используем метод .json(), который позволяет нам получить доступ к информации в формате json, которую вернул запрос, этот метод также является асинхронным, поэтому в нем должно быть слово await, которое можно сохранить в переменной:

const llamandoAPI = async () => {
  try {
    const respuesta = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')

    const data =  respuesta.json()
    console.log(data)

  } catch (error) {
    console.log(error);
  } 
}

llamandoAPI()
Войдите в полноэкранный режим Выход из полноэкранного режима

Этот объект уже содержит все свойства покемонов:

Теперь, если мы хотим получить доступ к какому-либо значению, мы можем манипулировать им как любым объектом, в данном случае мы получим доступ к имени первого значения:

const llamandoAPI = async () => {
  try {
    const respuesta = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')

    const data = await respuesta.json()

    console.log(data.results[0].name)

  } catch (error) {
    console.log(error);
  } 
}

llamandoAPI()
Войдите в полноэкранный режим Выход из полноэкранного режима

И в консоли нашего браузера мы должны увидеть:

bulbasaur
Войдите в полноэкранный режим Выход из полноэкранного режима

Если вы видите все эти данные, то они выглядят очень длинными, для этого мы можем использовать деструктуризацию объекта следующим образом:

const {results} = await respuesta.json()
console.log(results)
Войдите в полноэкранный режим Выход из полноэкранного режима

И теперь мы увидим только покемонов.
Если вы хотите увидеть все имена покемонов, вы можете использовать for, чтобы показать имена каждого покемона:

const llamandoAPI = async () => {
  try {
    const respuesta = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')

    const {results} = await respuesta.json()

    for (let i = 0; i < results.length; i++) {
      console.log(results[i].name)
    }

  } catch (error) {
    console.log(error);
  } 
}

llamandoAPI()
Войдите в полноэкранный режим Выход из полноэкранного режима

Это можно улучшить с помощью .map() Также, как мы видим, ответ возвращает 2 значения для name и url, поэтому мы можем деструктурировать это следующим образом:

const llamandoAPI = async () => {
  try {
    const respuesta = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')

    const {results} = await respuesta.json()

    const pokemones = results.map(async (pokemon) => {
      const {name, url} = pokemon
      console.log(name, url)
    })

  } catch (error) {
    console.log(error);
  } 
}

llamandoAPI()
Войдите в полноэкранный режим Выход из полноэкранного режима

И если вы думали об этом, то вы правы, мы можем сделать вызов каждого из покемонов, используя url, который вы передадите нам с помощью fetch() следующим образом:

const llamandoAPI = async () => {
  try {
    const respuesta = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')

    const {results} = await respuesta.json()

    const pokemones = results.map(async (pokemon) => {
      const {name, url} = pokemon
      const respuestaPokemon = await fetch(url)

    })

  } catch (error) {
    console.log(error);
  } 
}

llamandoAPI()
Войдите в полноэкранный режим Выход из полноэкранного режима

И мы можем применить вышесказанное, преобразовать ответ в .json() и затем деструктурировать интересующие нас данные:

const llamandoAPI = async () => {
  try {
    const respuesta = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')

    const {results} = await respuesta.json()

    const pokemones = results.map(async (pokemon) => {
      const {name, url} = pokemon
      const respuestaPokemon = await fetch(url)
      const { types } = await respuestaPokemon.json()
      console.log(name, types[0].type.name)
    })

  } catch (error) {
    console.log(error);
  } 
}

llamandoAPI()
Войдите в полноэкранный режим Выход из полноэкранного режима

Если мы увидим это в консоли браузера, мы получим имя покемона и его тип:

bulbasaur grass
ivysaur grass
venusaur grass
charmander fire
charmeleon fire
charizard fire
wartortle water
blastoise water
squirtle water
caterpie bug
metapod bug
butterfree bug
weedle bug
kakuna bug
beedrill bug
pidgey normal
pidgeotto normal
pidgeot normal
rattata normal
raticate normal
Войдите в полноэкранный режим Выход из полноэкранного режима

И вот как мы можем сделать вызов API.

Статус

Как мы видели в начале, если мы вызовем ответ без преобразования его в json, то получим что-то вроде этого:

Response {type: 'cors', url: 'https://pokeapi.co/api/v2/pokemon?limit=20&offset=0', redirected: false, status: 200, ok: true, …}
Войдите в полноэкранный режим Выход из полноэкранного режима

Как вы видите, есть свойство status, статус основан на кодах статуса ответа HTTP, (Я приглашаю вас взглянуть на эту тему поближе.) это дает нам короткий список:

  • Информативные ответы (100-199).
  • Успешные ответы (200-299).
  • Перенаправления (300-399).
  • Ошибки клиента (400-499).
  • Ошибки сервера (500-599).

Если вы задаетесь вопросом, зачем это нужно для вызова API, то это очень полезно, потому что вы можете проверить статус и в зависимости от него сделать то или иное действие.

В этом случае мы можем увидеть статус, который дает нам API, выполняя деструктуризацию, или мы можем сделать это отдельно, потому что мы можем использовать данные для передачи их в json:

const data = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')
console.log(data.status)
Войдите в полноэкранный режим Выход из полноэкранного режима

Если мы увидим в нашей консоли, что он возвращает нам:

200
Войдите в полноэкранный режим Выход из полноэкранного режима

И, глядя на список, мы имеем это:

  • Успешные ответы (200-299).Затем мы можем сделать валидацию, так что если соединение успешно, то оно сделает то, что мы просим, а если нет, то вернет ошибку.
const response = await fetch(
  'https://pokeapi.co/api/v2/pokemon?limit=20&offset=0'
)

if (response.status >= 200 && response.status < 300) {
  const data = await response.json()
  console.log(data)
}
Войдите в полноэкранный режим Выход из полноэкранного режима

Таким образом, мы подтверждаем, что ответ должен быть удовлетворительным, чтобы мы могли использовать данные.

Если вы хотите увидеть больше подобных уроков, вы можете зайти в мой профиль и там вы найдете большое разнообразие советов и уроков.👉 Советы и уроки …

Оцените статью
Procodings.ru
Добавить комментарий