API fetch() в JS

fetch() — это глобальный метод объекта window, который позволяет нам отправлять веб-запросы к API и извлекает набор данных, структурированных во вложенном хеше, известном как JSON. В JavaScript функция fetch встроена, она позволяет запрашивать любой URL или API для получения данных.

Базовая структура f`etch`

Выборка использует обещания javascript для обработки обратных вызовов. Вот базовая структура функции fetch():

fetch(`Use URL of the data source`)
.then((response)=> {
  return response.json();
}).then((json) => {
  console.log(json)
})

Функция fetch() с указанным выше URL-адресом API возвращает объект, содержащий запрашиваемый вами источник данных. Вызовите метод .then(), возьмите ответ, и fetch вернет нам ответ. Затем вы должны вызвать метод .json() для ответа, чтобы отобразить ответ API в виде JSON; это вернет обещание. Второй.then() получает данные и передает объект Javascript с ключами и значениями. Каждый .then() возвращает новое обещание; передача информации из одного промиса в следующий .then() — это то, что вы вернули в предыдущем .then().

Я делаю запрос, который в основном является обещанием. Я обещаю, что когда я вернусь с сервера, я дам тебе кое-что. Когда обещание будет выполнено, вы получите ответ. Вы можете превратить этот ответ из строки в Javascript.

Запросы

С помощью fetch() вы хотите сделать больше, чем просто получить данные с сервера. Вы можете публиковать, удалять и обновлять данные на сервере. Для этого вам нужно добавить второй параметр в метод выборки и использовать метод HTTP-запроса.

Тип HTTP-запроса:

GET - вывести список всех данных
GET — отображать конкретные данные (`/:id`)
POST - создать данные
PUT - обновить конкретную статью
DELETE - удалить конкретную статью

Второй параметр — это объект, который имеет разные ключи. Для целей этого блога я буду использовать ключевой метод POST .

fetch('https://tanukadas.com/some_blogs', {
  method: 'POST'	
})

Заголовки запроса

Далее нам нужно добавить заголовки. Заголовки — это в основном информация, которую вы отправляете в браузер. Это то, как вы общаетесь с сервером, описывая транзакцию, которую собираетесь совершить. Внутри объекта заголовка установите 'Content-Type' на 'application/json'. Он упоминает контент, который он будет отправлять, в данном случае его JSON, а контент, который он принимает обратно, — это JSON. Это тип преобразования, который мы имеем с заголовками.

fetch('https://tanukadas.com/some_blogs', {
  method: 'POST',
  headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
  }
})

Другой тип контента, который вы можете отправить, это текст/javascript, текст/html, текст/css, текст/обычный текст и т. д. Перейдите по следующей ссылке, если вы хотите узнать о различных типах контента.

Типы MIME (типы мультимедиа IANA)
Тип мультимедиа (также известный как многоцелевые расширения почты Интернета или тип MIME) — это стандарт, указывающий…разработчику .mozilla.org

Тело

Следующим шагом является передача данных блога (используемый здесь пример) в теле. Передайте его как JSON; дайте блогу имя, в данном случае это имя blog_4. Важно установить его как JSON.stringify, закодировать объект, который вы передаете.

fetch('https://tanukadas.com/some_blogs', {
  method: 'POST',
  headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
  },
  body: JSON.stringify({name: 'blog_4'})
})

Всякий раз, когда вы отправляете данные JSON на сервер, помните, что заголовок должен соответствовать правильному типу контента, а тело должно быть строковым. По сути, вы не можете просто отправить объект Javascript, вы должны преобразовать его в строку JSON.

Пока что эта функция только отправляет запрос на выборку, она еще не обрабатывает ответ. Чтобы получить ответ от выборки, вызовите метод .then, и он вернет другое обещание.

fetch('https://tanukadas.com/some_blogs', {
  method: 'POST',
  headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
  },
  body: JSON.stringify({name: 'blog_4'})
}).then((response)=> {
  return response.json();
}).then((blogData) => {
  console.log(blogData)
})

Эта функция делает выборку, публикует определенный блог с правильным названием. Затем он получает ответ, преобразует его в Javascript и записывает в консоль опубликованные данные.