Использование HTTP-клиентов на основе Promise для создания уровня API
Внешние и внутренние интерфейсы часто делают многочисленные асинхронные запросы к разным веб-службам для получения или записи данных. В частности, общий способ взаимодействия внешних интерфейсов с серверами - протокол HTTP.
Чтобы избежать дублирования кода, мы собираемся разработать специальный уровень, посвященный обработке внешних запросов, где мы можем разместить определения всех необходимых запросов API. Этот уровень направлен на разделение того, где определяются запросы API, и где они используются для выполнения вызовов. Этого можно достичь, используя силу обещания.
Обещание - это прокси для значения, не обязательно известного на момент создания обещания. Он позволяет связать обработчики с конечным значением успеха или причиной сбоя асинхронного действия. Это позволяет асинхронным методам возвращать значения, как синхронные методы; вместо немедленного возврата окончательного значения асинхронный метод возвращает обещание предоставить значение в какой-то момент в будущем . - Веб-документы MDN
Как мы проиллюстрируем, для реализации предлагаемого подхода требуется HTTP-клиент на основе Promise. Это требование не должно быть проблемой, поскольку использование надежного HTTP-клиента для обработки всех этих запросов должно быть предпочтительным подходом.
В этом руководстве мы собираемся использовать axios, но также можно использовать любой другой HTTP-клиент на основе Promise.
Цель этой статьи - не показать, как работает Axios, поэтому, если вы новичок в этой библиотеке, настоятельно рекомендуется прочитать эту замечательную статью Как делать HTTP-запросы с помощью Axios на профессиональном уровне.
Фрагменты кода будут написаны на React, но этот подход можно легко адаптировать к любым другим фреймворкам, библиотекам или даже обычному JavaScript.
Обратите внимание, что в back-end может быть применена та же концепция, что я показал в этой статье.
Давайте посмотрим, как достичь нашей цели всего за несколько шагов.
Создание нового экземпляра Axios
Прежде всего, нам нужно создать новый экземпляр Axios. Этого можно добиться двумя способами:
- Импорт или требование
axios - Использование функции
axios.create()
Первый возвращает экземпляр Axios по умолчанию, а второй создает новый экземпляр Axios. Второй подход более гибкий. Причина, по которой мы хотим создать новый экземпляр, состоит в том, чтобы установить пользовательские значения по умолчанию, используемые во всех запросах.
Теперь у нас есть экземпляр Axios, готовый к использованию для определения запросов API.
Определение уровня определения запросов API
Настоятельно рекомендуется организовать все определения запросов в разных файлах JavaScript. Один из подходов может заключаться в том, чтобы собрать все API с аналогичной конечной точкой в одном файле.
Затем нам понадобится дополнительный файл, в который мы поместим все файлы, из которых состоит вновь созданный слой. Это будет импортировано во все компоненты, которые должны выполнять вызовы API.
Таким образом, мы только что централизовали определение всех запросов API в одном месте. При таком подходе нам не нужно беспокоиться об изменении конечной точки API или необходимости дополнительных настроек. Определения собраны в одном месте, а именно на уровне определения запросов API, и это позволяет нам избежать дублирования кода.
Собираем все вместе
Теперь пора посмотреть, как мы можем использовать только что созданный уровень для вызовов API.
Давайте определим AuthorCard компонент, которому требуются данные конкретного автора, полученные с помощью вызова API.
AuthorAPI.getById(authorId) не выполняет вызов, а возвращает объект Promise, который можно использовать при необходимости. Вызов API выполняется только при вызове функции then().
При этом, благодаря тому, как работает Promises, нам удалось отделить место определения запросов API от того, где они фактически используются для выполнения вызовов.
Бонус
Этот уровень можно легко улучшить, добавив дополнительную систему автоматической отмены, как описано в этой статье:
Заключение
Здесь мы рассмотрели, как избежать дублирования кода, добавив уровень API в JavaScript. Надеюсь, эта статья оказалась для вас полезной, спасибо за внимание! Не стесняйтесь обращаться ко мне с любыми вопросами, комментариями или предложениями.
