HTTP-запросы + библиотека Axios — Краткое руководство для начинающих

HTTP-запросы позволяют нам связываться с серверами для управления данными. Например, у нас есть база данных. Таким образом, через HTTP-запросы мы можем получить данные из базы данных или добавить в нее какие-то данные и т. д., выполнить так называемые CRUD операции — Создать, Чтение , Обновить, Удалить.

Существует несколько методов HTTP-запросов, рассмотрим основные из них:

GET — позволяет нам ПОЛУЧИТЬ данные из указанного ресурса.
POST — используется для отправки данных на сервер для создания/обновления ресурса.
PUT — используется для отправки данных на сервер для создания/обновления ресурса. Разница междуPOSTиGETзаключается в том, что сообщение полностью ПЕРЕЗАПИСЫВАЕТ ваши данные, а PUT может просто ВНЕСИТЕ некоторые изменения, например обновить только одно поле в базе данных, а не всю запись.
DELETE— удаляет указанный ресурс.

Хорошо, мы узнали основы HTTP-запросов и их методов, теперь давайте воспользуемся этими знаниями.

Прежде чем мы начнем разбираться, как их использовать в JavaScript, я хочу упомянуть потрясающую и популярную библиотеку для запросов под названием Axios. Просто использовать его удобнее по сравнению с fetch(), который мы также рассмотрим в этой статье. Вы можете установить Axios через Npm, Yarn или CDN. Вы можете проверить это здесь.

Начнем с запроса GET:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data));
/* The same via Axios */
axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(data => console.log(data));

Мы получим следующее:

{
    completed: false,
    id: 1,
    title: 'delectus aut autem',
    userId: 1
}

Итак, у нас есть данные, расположенные по адресу https://jsonplaceholder.typicode.com/todos/1.

Попробуйте самостоятельно написать запрос GET с этим URL: https://jsonplaceholder.typicode.com/posts

Следующим является запрос POST:

fetch('https://ourdatabase.forexample.com/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ 
    goalId: 1,
    goalDesc: 'Become a web developer'
  })
});
/* Via Axios */
axios.post('https://ourdatabase.forexample.com/', {
  goalId: 1,
  goalDesc: 'Become a web developer'
});

Итак, после этого мы добавим наш объект в нашу базу данных. Возможно, у вас возникнут вопросы:

Что это за странный объект в методе fetch()? Ответ: это заголовок запроса, в котором мы храним некоторые параметры для нашего запроса. В Axios такой объект нам не нужен, потому что Axios все настраивает автоматически.
Что такое JSON? Ответ: это специальный формат данных. Его легко читать и писать. Это выглядит очень близко к объектам JS. Подробнее о формате JSON — здесь.

Следующим идет PUTзапрос. PUT делается так же, как и POST, мы только меняем поле метода.

fetch('https://ourdatabase.forexample.com/goals', {
  method: 'PUT',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    goalId: 1,
    goalDesc: 'Become a web developer' })
});
/* With Axios Library */
axios.put('https://ourdatabase.forexample.com/', {
  goalId: 1,
  goalDesc: 'Become a web developer'
});

Давайте представим, что у нас уже есть весь этот объект в нашей базе данных. Но мы хотим изменить только поле описания. Это абсолютно возможно сделать с запросом PUT. Вы можете просто удалить поле goalId в приведенном выше коде, и запрос PUT автоматически обновит только поле goalDesc в нашей базе данных. Насколько это круто? :) В этом разница между PUT и POST. Второй просто ЗАПИСЫВАЕТ наш объект новым, это означает, что в этом случае у нас будет только поле goalDesc.

И, наконец, последний — запрос DELETE.

fetch('https://yourdatabase.forexample.com/goals', {
  method: 'DELETE'
});
/* Via Axios */
axios.delete('https://yourdatabase.forexample.com/goals');

Это удалит запись по адресу https://yourdatabase.forexample.com/goals..

Это все на сегодня. Теперь вы знаете больше. Надеюсь, это было полезно для вас 🙂️ #madewithlove 💛️ Хорошего и прекрасного дня ✌️

Я также делюсь своим путешествием в Instagram 📸: @feenproject

HTTP-запросы + библиотека Axios — Краткое руководство для начинающих

Вопросы по теме