Как отправить файл на сервер axios
В этом руководстве вы научитесь добавлять Axios в проект Vue.js для обработки задач, связанных с заполнением и отправкой данных. Вы также узнаете о создании многоразового базового экземпляра.
Требования
Чтобы выполнить этот мануал, вам понадобится локальная установка Node.js. Инструкции по установке зависят от дистрибутива, выберите свой и приступайте к настройке среды: Mac OS, Ubuntu, CentOS, Debian.
Установка и импорт axios
Для начала мы установим библиотеку axios.
Это можно сделать с помощью npm:
npm install axios --save
Или с помощью Yarn:
Чтобы добавить Axios в свой проект Vue.js, нужно импортировать его:
Итак, библиотека доступна в нашем проекте. Затем мы воспользуемся методом axios.get(), чтобы сделать GET-запрос.
Добавление данных с помощью GET-запроса
Вы можете использовать библиотеку Axios непосредственно в своих компонентах для извлечения данных из метода или хука жизненного цикла:
Версия этого кода с async/await будет выглядеть так:
А теперь давайте посмотрим, как выполнить запроса POST с помощью axios.post().
Отправка данных с помощью POST-запроса
Вы можете использовать Axios для отправки запросов POST, PUT, PATCH и DELETE.
Примечание: Запросы не нужно отправлять при каждом событии ввода. Рассмотрите возможность использования дросселирования или противодействия.
Версия кода с async/await выглядит так:
Этот код создает поле ввода, которое будет отправлять данные в JSONPlaceholder. Любые обнаруженные ошибки собираются в отдельный неупорядоченный список.
Давайте теперь попробуем использовать axios.create() для создания базового экземпляра.
Создание базового экземпляра
Заключение
В этой статье вы научились использовать Axios для внесения и передачи данных. Также вы знаете, как как создать многоразовый базовый экземпляр. Это лишь малая часть того, что может сделать Axios. За дополнительной информацией по Axios можно обратиться к репозиторию GitHub.
Читайте также: