{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[{"key":0,"length":1,"offset":49},{"key":1,"length":15,"offset":50}],"inlineStyleRanges":[],"text":"Еще больше интересного в нашем телеграм канале - @frontend_campus","type":"blockquote","key":"75irh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Angular известен огромным количеством встроенных функций, но иногда мы используем лишь некоторые из них, не зная, каким может быть их полный потенциал.","type":"unstyled","key":"cqpdo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодняшняя проблема","type":"header-three","key":"96un4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представим себе, что у нас есть часть данных, которую мы получаем снова и снова.","type":"unstyled","key":"7oueh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, мы можем создать приложение для библиотеки фотографий, в котором будут отображаться альбомы пользователя. Обычно пользователи перемещаются по приложению туда-сюда, просматривая свои фотографии.","type":"unstyled","key":"crqjk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Без кэширования это означает, что каждый раз, когда пользователь обращается к альбому, все данные о каждой фотографии должны быть получены с сервера заново.","type":"unstyled","key":"a8lni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это как раз то, что мы можем улучшить!","type":"unstyled","key":"cc67j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начальное состояние","type":"header-three","key":"1g89o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот наше приложение в действии:","type":"unstyled","key":"8gbf6"},{"data":{"image":{"id":"65967771270a0108aa3d5938"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1ff3v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пока что оно просто отображает количество фотографий в каждом альбоме. Но если мы посмотрим на вкладку \"Сеть\", то увидим, что каждый раз, когда мы обращаемся к альбому, приложение снова извлекает информацию о нем, даже если мы только что щелкнули по нему.","type":"unstyled","key":"2ddp9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поскольку эти альбомы принадлежат пользователю, есть вероятность, что любые изменения будут происходить с его стороны. Пока они просто просматривают страницы, это может мало что изменить.","type":"unstyled","key":"cr161"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Похоже, что здесь может помочь кэширование !","type":"unstyled","key":"53q3t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привлечение Interceptor на помощь","type":"header-three","key":"6ea9p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы добавить дополнительное поведение в HttpClient во время обработки запросов, нам нужно создать новый перехватчик для определения связанной с ним логики.","type":"unstyled","key":"9j37d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перехватчик - это особый тип сервиса, который позволяет нам настроить в своем роде слой, через который будет проходить HTTP-запрос, прежде чем он будет отправлен на сервер.","type":"unstyled","key":"avalo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для кэширования это означает, что мы можем перехватить запрос, если уже знаем, каким будет ответ.","type":"unstyled","key":"bk3q9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание Interceptor","type":"header-three","key":"b08sn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы определить перехватчик, нам сначала нужно создать и зарегистрировать его.","type":"unstyled","key":"booo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":22,"style":"BOLD"},{"length":10,"offset":153,"style":"BOLD"},{"length":9,"offset":164,"style":"BOLD"}],"text":"Перехватчик имеет тип HttpInterceptorFn, который принимает запрос и следующий обработчик в конвейере в качестве параметров и возвращает результат в виде Observable HttpEvent:","type":"unstyled","key":"e675k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDCC1 app/caching.interceptor.ts\n\nexport const cachingInterceptor: HttpInterceptorFn = (\n req: HttpRequest,\n next: HttpHandlerFn\n): Observable> => {\n // For now, this is just a pass-through\n return next(req);\n};","type":"blockquote","key":"c07om"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы зарегистрировать наш Interceptor, нам нужно добавить его в provideHttpClient при монтировании приложения:","type":"unstyled","key":"8n43d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDCC1 main.ts\n\nbootstrapApplication(AppComponent, {\n providers: [\n provideRouter(routes, withComponentInputBinding()),\n provideHttpClient(\n // \uD83D\uDC47 Добавляем interceptor в пайплайн\n withInterceptors([cachingInterceptor])\n ),\n ],\n}).catch((err) => console.error(err));","type":"blockquote","key":"nhfq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все готово!","type":"unstyled","key":"dqmhc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если мы снова запустим наше приложение, то пока что ничего не изменится. Хотя это может быть не очень полезно, по крайней мере, это указывает на то, что мы ничего не сломали, и HTTP-запросы по-прежнему поступают в наше приложение.","type":"unstyled","key":"lq2f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание нашего кэша","type":"header-three","key":"7bsc0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самый простой подход к созданию кэша - это создать Map коллекцию ответов по урлам:","type":"unstyled","key":"coebl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDCC1 app/caching.interceptor.ts\n\nconst cache = new Map>();\n\nexport const cachingInterceptor: HttpInterceptorFn = (\n req: HttpRequest,\n next: HttpHandlerFn\n): Observable> => {\n const cached = cache.get(req.url);\n\n // \uD83D\uDC47 If the response is known, return it without making a request\n const isCacheHit = cached !== undefined;\n if (isCacheHit) {\n return of(cached);\n }\n\n return next(req).pipe(\n // \uD83D\uDC47 Cache the response as it flows back into our application\n tap((response) => cache.set(req.url, response))\n );\n};","type":"blockquote","key":"78rcf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если мы снова запустим наше приложение, то увидим, что информация об альбоме запрашивается только при первом обращении:","type":"unstyled","key":"95om6"},{"data":{"image":{"id":"65967772438ebb0987fe176a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"gkcf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ограничение кэша","type":"header-three","key":"93tuk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Несмотря на то, что этот подход позволяет кэшировать наши запросы, его недостатком является то, что все запросы будут кэшироваться, в то время как мы, возможно, хотим кэшировать только те, которые связаны с альбомом.","type":"unstyled","key":"180u7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поскольку мы хотим добавить некоторую логику в наш кэш, мы можем преобразовать его в более умную логику и превратить его в сервис:","type":"unstyled","key":"225ql"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDCC1 app/caching.service.ts\n\n@Injectable({ providedIn: \"root\" })\nexport class CachingService {\n readonly #cache = new Map>();\n\n get(key: string): HttpEvent | undefined {\n return this.#cache.get(key);\n }\n\n set(key: string, value: HttpEvent): void {\n if (key.includes(\"album\")) {\n this.#cache.set(key, value);\n }\n }\n}","type":"blockquote","key":"5cnm2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь мы используем простое условие (ключ album) для проверки необходимости кэширования. В реальных приложениях вы можете написать свои условия кеширования запроса.","type":"unstyled","key":"d1lbl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поскольку функции перехватчиков вызываются в контексте инъекции, мы можем использовать инъекцию зависимостей в их определении:","type":"unstyled","key":"1345n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDCC1 app/caching.interceptor.ts\n\nexport const cachingInterceptor: HttpInterceptorFn = (\n req: HttpRequest,\n next: HttpHandlerFn\n): Observable> => {\n // \uD83D\uDC47 Наш кеширующий сервис\n const cache = inject(CachingService);\n\n const cached = cache.get(req.url);\n\n const isCacheHit = cached !== undefined;\n if (isCacheHit) {\n return of(cached);\n }\n\n return next(req).pipe(tap((response) => cache.set(req.url, response)));\n};","type":"blockquote","key":"792sv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С точки зрения interceptorа ничего не изменилось. Однако, поскольку теперь у нас есть выделенная служба, добавление более сложной логики значительно упростится.","type":"unstyled","key":"69dp2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Улучшение кэша","type":"header-three","key":"cp0sf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наконец, мы могли бы захотеть, чтобы кэш истекал через некоторое время.","type":"unstyled","key":"fa4ve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для этого мы можем немного расширить его, добавив время жизни для каждой записи:","type":"unstyled","key":"1v9ig"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDCC1 app/caching.service.ts\n\ninterface CacheEntry {\n value: HttpEvent;\n expiresOn: number;\n}","type":"blockquote","key":"1fash"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И при необходимости истекает срок действия связанного с ним значения:","type":"unstyled","key":"970hd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDCC1 app/caching.service.ts\n\nconst TTL = 3000;\n\n@Injectable({ providedIn: \"root\" })\nexport class CachingService {\n readonly #cache = new Map();\n\n get(key: string): HttpEvent | undefined {\n const cached = this.#cache.get(key);\n\n if (!cached) {\n return undefined;\n }\n\n // \uD83D\uDC47 Удалите данные из кеша, если срок действия истек\n const hasExpired = new Date().getTime() >= cached.expiresOn;\n if (hasExpired) {\n this.#cache.delete(key);\n return undefined;\n }\n\n return cached.value;\n }\n\n set(key: string, value: HttpEvent): void {\n if (key.includes(\"album\")) {\n this.#cache.set(key, {\n value,\n // \uD83D\uDC47 Устанавливаем время сколько будет жить кеш\n expiresOn: new Date().getTime() + TTL,\n });\n }\n }\n}","type":"blockquote","key":"efvlm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если мы снова посмотрим на вкладку \"Сеть\" нашего браузера, то увидим, что каждый запрос кэшируется в течение нескольких секунд, после чего кэш истекает:","type":"unstyled","key":"5o89a"},{"data":{"image":{"id":"65967772c8a9ac3755eecb3b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9g7hs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выводы","type":"header-three","key":"80hke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой статье мы рассмотрели, как перехватывать HTTP-запросы, выполняемые нашим приложением Angular, и как ими манипулировать.","type":"unstyled","key":"335ao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы также увидели, как использовать преимущества системы инъекции зависимостей Angular для добавления пользовательской логики в перехватчик.","type":"unstyled","key":"eja7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наконец, мы создали небольшую систему кэширования на стороне клиента для нашего приложения.","type":"unstyled","key":"26g9j"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":15,"offset":42}],"inlineStyleRanges":[],"text":"Еще больше интересного у нас в телеграме: frontend_campus","type":"blockquote","key":"7du21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"7SYBHMXjERX8mPjsOzZ6"}],"entityMap":{"0":{"data":{"url":"https://t.me/frontend_campus"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://t.me/frontend_campus"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://t.me/frontend_campus"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}