Как использовать Axios в приложении JavaScript

Axios – это библиотека с открытым исходным кодом, позволяющая делать HTTP-запросы. Она предоставляет методы .get(), .post() и .delete().

В этом коротком мануале вы создадите тестовое приложение JavaScript, которое использует Axios для отправки запросов GET, POST и DELETE на сервер для обновления списка задач.

Требования

Чтобы выполнить этот мануал, вам понадобится локальная установка Node.js. Инструкции по установке можно найти согласно дистрибутиву: mac OSDebianCentOSUbuntu.

Мануал был протестирован на версиях Node 15.11.0, npm 7.6.1, axios 0.21.1, parcel-bundler 1.12.5.

1: Создание проекта

В первом разделе мы создадим новый каталог проекта, установим зависимости пакетов и настроим файлы конфигурации.

Прежде всего нужно создать новый каталог:

mkdir axios-js-example

Перейдите в каталог проекта:

cd axios-js-example

Затем инициализируйте новый проект npm:

npm init -y

И установите библиотеку Axios:

npm install axios@0.21.1

Примечание: Axios также можно добавить через CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Parcel – это инструмент для объединения и обслуживания кода. Установите пакет parcel-bundler как зависимость разработки:

npm install parcel-bundler@1.12.5 --save-dev

На этом этапе у вас есть новый проект с библиотеками axios и parcel-bundler.

Теперь откройте package.json в редакторе кода и добавьте в раздел “scripts”  выполнение пакета parcel для dev и build:

{
// ...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "parcel index.html",

"build": "parcel build index.html"

}
// ...
}

После этого создайте новый файл app.js. Вставьте в этот файл следующие строки кода, чтобы избежать ошибки «regeneratorRuntime is not defined» при использовании await и async:

import 'regenerator-runtime/runtime';
import axios from 'axios';

Теперь создайте новый файл index.html и добавьте в него следующие строки кода:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vanilla Axios</title>
<style>
body {
background-color: #673AB7;
color: white;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: .5em;
margin-top: .5em;
padding: 1em;
border: 1px solid white;
transition-property: background-color, color;
transition-duration: 500ms;
transition-timing-function: ease-in-out;
}
li:hover {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div>
<h1>Todos</h1>
<ul>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>

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

Теперь убедитесь, что ваш проект работает. Откройте терминал и выполните следующую команду:

npm run dev

Затем откройте адрес http://localhost:1234/ в своем браузере. Вы увидите страницу с заголовком Todos.

2: Определение GET-запроса

В этом разделе мы создадим функцию, которая будет обращаться к Axios для выполнения HTTP-запроса GET к JSON Placeholder API.

Откройте app.js  в редакторе кода. Вставьте в файл следующие строки кода:

// ...
const BASE_URL = 'https://jsonplaceholder.typicode.com';
const getTodoItems = async () => {
try {
const response = await axios.get(`${BASE_URL}/todos?_limit=5`);
const todoItems = response.data;
console.log(`GET: Here's the list of todos`, todoItems);
return todoItems;
} catch (errors) {
console.error(errors);
}
};

Обратите внимание, как в axios.get передается путь, состоящий из BASE_URL и строки todos. Параметр _limit ограничивает ответ 5 элементами.

Этот метод вернет объект response. Сюда входит информация об ответе, включая headers, status, config и, что наиболее важно, data.

Затем вставьте в app.js код для создания элемента todo и добавьте элементы todo в список:

// ...
const createTodoElement = item => {
const todoElement = document.createElement('li');
todoElement.appendChild(document.createTextNode(item.title));
return todoElement;
};
const updateTodoList = todoItems => {
const todoList = document.querySelector('ul');
if (Array.isArray(todoItems) && todoItems.length > 0) {
todoItems.map(todoItem => {
todoList.appendChild(createTodoElement(todoItem));
});
} else if (todoItems) {
todoList.appendChild(createTodoElement(todoItems));
}
};
const main = async () => {
updateTodoList(await getTodoItems());
};
main();

Сохраните изменения и просмотрите свое приложение в браузере. Вы увидите список из пяти пунктов.

3: Определение POST-запроса

В этом разделе мы создадим форму и введем в нее данные, чтобы собрать информацию о новых задачах, которые нужно добавить в список. Наша форма будет использовать библиотеку Axios для выполнения HTTP-запроса POST.

В редакторе кода откройте файл index.html и добавьте в него следующие строки:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
<style>
/* ... */
#new-todos form {

margin-bottom: .5em;


margin-top: .5em;


padding: 1em;


border: 1px solid white;

}
</style>
</head>
<body>
<div id="new-todos">

<h1>New Todo</h1>


<form>


<label>


Name


<input type="text" id="new-todos__title" />


</label>


<button type="submit">Add</button>


</form>


</div>

<div>
<h1>Todos</h1>
<ul>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>

После этого откройте файл app.js в редакторе кода и вставьте в него такие строки:

// ...
const form = document.querySelector('form');
form.addEventListener('submit', async event => {
event.preventDefault();
const title = document.querySelector('#new-todos__title').value;
const todo = {
userId: 1,
title: title,
completed: false
};
const submitTodoItem = await addTodoItem(todo);
updateTodoList(submitTodoItem);
});

Этот код возьмет значение из формы и создаст объект todo.

Затем нужно определить функцию addTodoItem. Сделать это нужно внутри app.js:

// …
export const addTodoItem = async todo => {
try {
const response = await axios.post(`${BASE_URL}/todos`, todo);
const newTodoItem = response.data;
console.log(`Added a new Todo!`, newTodoItem);
return newTodoItem;
} catch (errors) {
console.error(errors);
}
};

Обратите внимание: в axios.post передается путь и полезная нагрузка, содержащая элемент todo.

Сохраните изменения и просмотрите свое приложение в браузере. Вы увидите список из пяти пунктов и форму. Попробуйте заполнить эту форму, чтобы добавить в список todo новый элемент, – ваш список обновится и покажет шесть элементов.

4: Определение DELETE-запроса

А теперь давайте создадим для существующих элементов событие клика, которое будет удалять их из списка. Это событие будет использовать Axios для выполнения HTTP-запроса DELETE.

Определите функцию deleteTodoItem внутри файла app.js:

// …
export const deleteTodoItem = async id => {
try {
const response = await axios.delete(`${BASE_URL}/todos/${id}`);
console.log(`Deleted Todo ID: `, id);
return response.data;
} catch (errors) {
console.error(errors);
}
};

Обратите внимание, мы передаем в axios.delete путь, который включает id элемента задачи.

Затем создайте функцию removeTodoElement:

// ...
const removeTodoElement = async (event, element) => {
event.target.parentElement.removeChild(element);
const id = element.id;
await deleteTodoItem(id);
};

Этот код удалит элемент из DOM, а затем вызовет deleteTodoItem по id.

Теперь вернитесь к функции createTodoElement. Давайте добавим две новые строки кода. Когда элемент списка создается, мы добавляем к нему событие onclick, чтобы удалить его. Событие возьмет id элемента и передаст его в функцию removeTodoElement, которая, в свою очередь, вызовет deleteTodoItem:

// ...
const createTodoElement = item => {
const todoElement = document.createElement('li');
todoElement.id = item.id;
todoElement.appendChild(document.createTextNode(item.title));
todoElement.onclick = async event => await removeTodoElement(event, todoElement);
return todoElement;
};
// ...

Сохраните изменения и откройте свое приложение в браузере. Вы увидите список из пяти пунктов и форму. Эту форму можно использовать для добавления нового элемента в список, после чего он обновится и отобразит шесть задач. Кликнув по одному из пунктов списка, вы удалите этот пункт – в итоге в списке останется пять пунктов.

Заключение

В этом руководстве вы научились создавать приложение JavaScript – список задач, который поддерживает Axios для выполнения запросов GET, POST и DELETE к серверу.

Tags: ,

Добавить комментарий