Когда я запускал приложение, я устанавливал свой клиент axios в один файл, где я устанавливал конфигурации, методы и перехватчики. Это был хороший подход, потому что моя команда могла видеть все методы и конфигурации в одном файле, и поддержка не была слишком сложной.
Пришло время, когда у нас было 100 или более методов в нашем API, и найти правильный для обновления/поддержки было довольно сложно, поэтому я попытался найти решение для сопоставления архитектуры бэкенда с вызовами нашего интерфейса.
Решение, к которому я пришел, заключалось в создании класса миксинов (https://javascript.info/mixins), в котором мы будем хранить все методы из нашего бэкенда.
Этот класс получит клиент, который будет использовать, со всеми настройками конфигурации (файлы cookie, заголовки аутентификации и т. д.) и методы, которые мы собираемся использовать.
Архитектура этого класса API может выглядеть так:
В папке клиента будет 2 файла:
config.js, где мы будем устанавливать все заголовки, куки, таймауты, baseUrls и другие (https://github.com/axios/axios#request-config) и экспортируем перехватчики, которые мы хотим добавить в наш клиент.
И файл index.js, который создаст экземпляр axios и установит конфигурацию и перехватчики, экспортированные предыдущим файлом.
Методы будут созданы в отдельном файле и будут экспортированы в index.js, поэтому мы можем использовать один объект методов.
Когда у нас есть клиент и методы, мы можем передать их API, где мы собираемся создать класс следующим образом:
импортировать методы из «./methods»;
импортировать apiClient из «./client»;
класс API {
конструктор(apiClient) {
this.apiClient = apiClient;
// Здесь вы можете установить некоторые глобальные значения для вашего API.
Object.assign(this, method);
}
}
const API = новый API(APIClient);
экспорт API по умолчанию;
При этом (в зависимости от того, как вы экспортируете свои методы) мы можем использовать наш API в любом модуле компонента, который мы хотим, импортируя его следующим образом:
импортировать API из ‘./path/to/api’
ожидайте api.posts.getAll() ИЛИ ожидайте api.getAllPosts()
