Axios — это популярная библиотека JavaScript, используемая для отправки HTTP-запросов. Это HTTP-клиент на основе promise, используемый в JavaScript или с другими библиотеками JavaScript, такими как Vue.js или React.js. Благодаря своей изоморфной природе, Axios может работать на стороне клиента и сервера одновременно, используя одну и ту же кодовую базу. Кроме того, это мощный инструмент, используемый совместно с async для создания удобного API. Прежде всего, Axios имеет возможность автоматически прерывать запрос, что в противном случае было бы непростой задачей.
Как работает Axios?
Axios использует стандартные promise настройки для параллельной работы в браузере и Node.js с тем же кодом. Используя функцию HTTP на основе promise, Axios выполняет CRUD операции и отправляет HTTP-запросы к REST конечным точкам. В этом руководстве мы подробно рассмотрим шаги настройки REST API с помощью Axios в Vue.js.
Давайте начнем!
Предварительные требования
Чтобы выполнить это руководство, вам понадобится следующее:
- Установленный Node.js и настроенный в вашей системе Ubuntu.
- Если вы используете ОС CentOS, вы можете следовать этому руководству, чтобы установить Node.js на CentOS 8.
- Основы JavaScript.
Шаг 1. Установка Axios
Перед установкой Axios важно обновить системные репозитории, чтобы избежать ошибок или сбоя установки:
|
1 |
sudo apt-get update |
Затем установите Axios с помощью npm пакета программного обеспечения:
|
1 |
npm install axios --save |
Кроме того, вы можете установить Axios с помощью yarn менеджера пакетов:
|
1 |
yarn add axios |
После этого создайте проект Vue.js и импортируйте в него Axios:
|
1 |
import axios from ‘axios’; |
На следующем шаге мы будем использовать метод axios.get() для получения запросов.
Шаг 2. Получение данных с помощью GET-запроса
Здесь мы собираемся получить данные с помощью запроса GET. Посмотрите, как мы используем метод axios.get() для извлечения данных непосредственно из метода:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<template> <div> <ul v-if="posts && posts.length"> <li v-for="post of posts"> <p><strong>{{post.title}}</strong></p> <p>{{post.body}}</p> </li> </ul> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { posts: [], errors: [], }; }, // Получает записи при создании компонента. created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // Ответы JSON анализируются автоматически. this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
Вы увидите версию async или await :
Приведенный выше код получит записи из JSONPlaceholder и распределит данные в виде маркированного списка. Любые возникшие ошибки будут отображаться в другом маркированном списке.
Шаг 3. Отправка данных с помощью POST-запроса
В отличие от метода axios.get(), теперь мы будем использовать метод axios.post() для выполнения POST-запроса. Посмотрите, как применить метод axios.post() для получения данных:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<template> <div> <input type="text" v-model="postBody" @change="postPost()" /> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { postBody: "", errors: [] } }, methods: { // Отправляет посты на сервер при вызове. postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
Вы увидите async или await версию:
Приведенный выше код создаст поле ввода, которое отправляет содержимое на JSONPlaceholder. Любые возникшие ошибки отображаются в отдельном маркированном списке.
Шаг 4. Настройка общего базового экземпляра
На этом шаге мы создадим общий базовый экземпляр с помощью метода axios.create() . Цель настройки общего базового экземпляра — использовать один и тот же базовый URL-адрес во всех экземплярах.
Общий базовый экземпляр полезен, если все ваши вызовы используют общий сервер или заголовок, например Authorization заголовок:
|
1 2 3 4 5 6 7 8 |
import axios from "axios"; export const HTTP = axios.create({ baseURL: `http://jsonplaceholder.typicode.com/`, headers: { Authorization: "Bearer {token}" } }) |
Наконец, все готово для использования HTTP в вашем компоненте:
После выполнения всех настроек наш http-demo.js готов. Теперь Axios подключается к JSONPlaceholder и Authorization заголовку одновременно, используя ту же кодовую базу. Самое приятное то, что Axios получает posts, определяет ошибки и отображает их в маркированном списке.
Заключение
В этом руководстве мы изучили основы отправки и получения данных с помощью Axios. Кроме того, мы создали общий базовый экземпляр для совместного использования общего URL-адреса. Однако это не должно быть концом вашего изучения Axios. Мы рекомендуем вам попрактиковаться в использовании других методов Axios для отправки POST, PUT, PATCH и DELETE запросов. Погрузитесь в документацию Axios, чтобы изучить эту тему и попробовать создать проекты самостоятельно.
Чтобы узнать больше о темах Axios и Vue.js, ознакомьтесь с этими ресурсами из нашего блога:
- Использование HTTP-клиента Axios в приложении React: руководство
- Использование Vue и Axios для отображения данных из API
Приятного программирования!
Комментарии
Комментариев пока нет. Будьте первым.