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