Что такое добыча?

Конечно, вы можете играть со своим щенком в «принеси», но если вы попытаетесь вовлечь его в призыв, ваши результаты будут не очень хорошими.

Fetch – это способ взаимодействия с API. Будь то API, ваш собственный экспресс-сервер, который контролирует доступ к вашей mongoDB или к информации из общедоступного API, такого как https://pokeapi.co/. Fetch основан на обещаниях.

Объект Promise представляет возможное завершение (или сбой) асинхронной операции и ее результирующее значение.
- MDN

Fetch подключается к конечной точке, которая является URL-адресом, предоставленным API или настроенным вами для подключения. Затем возвращается обещание.

fetch('https://pokeapi.co/api/v2/pokemon/bulbasaur')
.then (res =>{
 res.json()
})

Теперь, если вы зарегистрируете этот вызов в консоли, вы увидите, что обещание действительно было возвращено. Поэтому после этого мы использовали оператор .then, чтобы получить res (объект ответа) и прикрепили метод json, чтобы иметь возможность читать тело. этого. Метод .json возвращает другое обещание, поэтому мы свяжем их в цепочку... но сначала...

У нас другая проблема. С запросами fetch, если что-то действительно не мешает выборке достичь URL-адреса, она будет считаться успешной независимо от того, будет ли возвращена какая-либо информация. Нам нужно проверить, действителен ли ответ, проверив, является ли он .ok.

fetch('https://pokeapi.co/api/v2/pokemon/bulbasaur')
.then (res =>{
if (res.ok){
 res.json()
}
})

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

fetch('https://pokeapi.co/api/v2/pokemon/bulbasaur')
.then (res => .then (res =>{
if (res.ok){
res.json()
}
})
.then(data => console.log(data))
.catch (error => console.log(error))

Теперь, когда мы это уладили, что, если мы захотим что-то сделать с данными? Что ж, когда мы вызвали fetch, мы заполнили только параметр URL. Fetch на самом деле имеет два параметра: URL-адрес и второй, который является объектом. Этот объект включает метод. Это будет стандартный метод типа HTTP, такой как POST/GET/DELETE. То, что мы уже сделали, это GET по умолчанию.

Теперь у нас нет разрешения на POST или DELETE из Pokemon API, но давайте представим, что оно у нас есть. Мы собираемся опубликовать нашего оригинального покемона, Бигфута. Мы собираемся передать Bigfoot как JSON, поэтому нам нужно установить заголовки как Content-Type: application/json.

fetch('https://pokeapi.co/api/v2/pokemon/bulbasaur', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'Bigfoot',
type: 'ground'
})
}
)
.catch(error => console.log('ERROR'))

Не забудьте использовать JSON.stringify(), чтобы изменить объект JS на строку JSON, чтобы API мог использовать ваши данные.

Это довольно простой обзор fetch, надеюсь, он вам помог!