Основы Vue.js - HTTP-клиент Axios и переменные окружения

Пришло время получить актуальные данные из нашей серверной части и отобразить их в наших компонентах. Для этого нам нужно использовать клиентскую библиотеку HTTP, а поскольку Vue.js не имеет своей собственной, мы собираемся использовать Axios. Кроме того, нам необходимо настроить Axios для отправки запросов на наш внутренний сервер в зависимости от окружения, в которой находится наше приложение.

Настройка переменных окружения

В режиме разработки нам нужно направить наши HTTP-запросы на наш локальный бэкэнд, который находится по адресу http://localhost:5000/api. Когда мы развертываем приложение в производственной среде, мы будем направлять наши запросы API на бэкэнд, который находится на удаленном сервере, а не в наш локальный бэкэнд, что-то вроде http://www.youproject.com/api.

Чтобы реализовать это поведение, нам нужно изменить файлы окружения.

В каталоге config у нас есть файлы среды. Давайте откроем файл config/dev.env.js и добавим в него новую переменную окружения:

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ENDPOINT: '"http://localhost:5000/api"'
})

Проделаем то же самое с файлом config/prod.env.js:

module.exports = {
  NODE_ENV: '"production"',
  API_ENDPOINT: '"http://www.youproject.com/api"'
}

Теперь нам нужно установить Axios и настроить его для использования этих переменных.

Установка Axios

Откроем терминал и в корне нашего проекта и введем команду:

npm i axios

После завершения установки необходимо открыть файл main.js, импортировать Axios и настроить его для использования переменной API_ENDPOINT в качестве базового URL для всех запросов Axios.

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import Axios from 'axios';
Vue.config.productionTip = false;

Axios.defaults.baseURL = process.env.API_ENDPOINT;

Vue.use(BootstrapVue);

process - это глобальная переменная Node.js, через которую мы можем получить доступ к нашим переменным среды.

После того, как мы закончили с переменными окружения, пришло время создать нашу первую службу API, с помощью которой необходимо собирать некоторые данные из нашей серверной части.

Vue.js не имеет никаких правил об архитектуре кода, например о том, где размещать сервисы или модели. Мы можем структурировать проект Vue.js по своему усмотрению, поскольку он не знает таких терминов, как Service, Controller или Model. Мы можем реализовать все это в простом файле .js, который мы создаем для этой конкретной цели.

Создание службы API

Давайте создадим новый каталог в нашем каталоге src и назовем его api-services. Затем внутри него мы создадим новый файл и назовем его owner.service.js.

В этом файле мы собираемся реализовать наши вызовы Axios на бэкэнд, и рекомендуется создавать отдельные служебные файлы API для каждой сущности в нашей базе данных или ресурсе RESTful.

Далее импортируем Axios и реализуем вызовы RESTful в нашем файле owner.service.js:

import Axios from 'axios';
const RESOURCE_NAME = '/owner';


export default {
    getAll() {
        return Axios.get(RESOURCE_NAME);
    },


    get(id) {
        return Axios.get(${RESOURCE_NAME}/${id});
    },


    create(data) {
        return Axios.post(RESOURCE_NAME, data);
    },


    update(id, data) {
        return Axios.put(${RESOURCE_NAME}/${id}, data);
    },


    delete(id) {
        return Axios.delete(${RESOURCE_NAME}/${id});
    }
};

Просто для целей тестирования импортируем наш сервис API в компонент Home.vue и проверим, работает ли она.

Получение данных из серверной части

Откроем файл src/Home.vue, импортируем в него OwnerService и выполним из него функцию getAll():

<script>
import OwnerService from '@/api-services/owner.service';

export default {
  name: 'Home',
  created() {
    OwnerService.getAll().then((response) => {
      console.log(response.data);
    }).catch((error) => {
      console.log(error.response.data);
    });
  }
};
</script>

Функция created() является частью жизненного цикла компонента Vue.js. Она будет выполнена после того, как компонент будет создан и все данные установлены, но этап монтирования компонента еще не начат. Мы используем этот хук, чтобы проверить, работает ли OwnerService.

Когда мы вызываем любую из функций Axios в нашей службе API, эта функция возвращает Promise, потому что HTTP-вызовы являются асинхронными. Что нам нужно сделать, так это вернуть это обещание из нашей службы API, а затем прослушать ответ Promise. Это основная причина, по которой мы вызываем .then() после вызова службы API.

Запустим наше приложение с npm run dev и введем http://localhost:8080 в веб-браузере. Затем мы собираемся открыть DevTools (F12), переключиться на Console и перезагрузить нашу страницу. Мы должны увидеть следующий результат:

Далее удалим реализацию хука жизненного цикла created(), потому что мы убедились, что наша служба API работает нормально.

Заключение

Теперь вы готовы создавать новые компоненты и отображать данные, которые будете получать от серверной части.

Прочитав этот пост, вы узнали:

• Как работать с файлами окружения в Vue.js
• Как установить и настроить клиент Axios
• Как реализовать API-сервис
• Как совершать HTTP-вызовы

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