Иногда в нашем проекте у нас есть требование, которое является общим для большинства методов, обычно мы создаем общий вспомогательный метод и вызываем его вручную во всех методах. Но для вызова этого метода требуется изменение кода, и если на более позднем этапе мы не захотим использовать это поведение для метода, мы должны снова удалить этот вызов из метода. В некоторых из таких ситуаций следует выбирать Custom Decorator вместо создания вспомогательных методов.
Сегодня мы поговорим об одном из таких сценариев. Если мы обратимся к Официальной документации Angular для кеширования HTTP-вызовов, то там будет предложен механизм использования HTTP-перехватчиков.
Но допустим, у меня есть несколько HTTP-вызовов, которые обслуживают основные данные для моего приложения, и я хочу только их кэшировать. В этом случае мне потребуется изменить свой перехватчик, чтобы кэшировать ответ для определенного URL-адреса или передать настраиваемый заголовок для каждого метода.
Что, если бы мы могли решить такое поведение с помощью Custom Decorator и просто добавить наш собственный декоратор в наши методы, где мы хотим, чтобы наш ответ от API был кэширован. Или просто удалите декоратор, если мы не хотим, чтобы он кэшировался.
Итак, давайте создадим один такой декоратор для нашего случая использования. В Angular декораторы - это обычные функции, которые должны возвращать другую функцию для вызова. Существует несколько типов декораторов, таких как декораторы классов, декораторы методов и т. Д. Мы также использовали множество встроенных декораторов, предоставляемых angular, таких как @Input, @Component и т. Д.
В нашем случае мы будем использовать декоратор метода.
Обычно мы возвращаем Observable, возвращаемый HTTP-клиентом из нашего метода службы. Значит, наша функция-декоратор должна сохранять результат и возвращать его при каждом последующем вызове, верно ?. Итак, давайте посмотрим, как это сделать.
Итак, выше мы создали функцию с именем CacheRes, которую мы определили как MethodDecorator. Этот метод будет вызываться при инициализации службы. В descriptor.value мы получаем фактический метод, к которому был применен этот декоратор, и возвращаем измененный дескриптор для применения нашего кэширования. Вызов декоратора автоматически обрабатывается Angular.
Этот декоратор можно импортировать и использовать, как показано ниже.
Давайте посмотрим, как работает наш декоратор в действии.
Но в настоящее время наш декоратор будет кэшировать ответ один раз и всегда возвращать кешированный ответ, что, если мы хотим, чтобы он извлекал данные из серверной части после возврата ответа из кеша определенное количество раз. Давайте изменим наш декоратор CacheRes для этой поддержки.
Мы добавили счетчик refreshAfter со значением по умолчанию -1. Поэтому, если мы используем декоратор, как показано ниже, он сохранит прежнее поведение.
Если мы хотим теперь использовать последний добавленный счетчик, чтобы решить, сколько раз он обслуживается из кеша, мы можем использовать его, как показано ниже.
И теперь, наконец, давайте посмотрим на недавно добавленную функцию в действии.
Примечание: - В настоящее время этот декоратор будет работать только для API без динамических параметров и тела запроса. Для таких сценариев, как получение списка стран, списка пользователей и т. Д. Но также может быть расширен для обработки этих случаев.
Как только мы привыкнем к созданию пользовательских декораторов, они очень полезны в обработке таких сценариев и сделают наш код легко настраиваемым, так как это просто добавление или удаление декоратора для переключения желаемой функциональности без изменения основной логики внутри нашего метода.
