چگونه در انگولار نتیجه درخواست HTTP را Cache کنیم؟

توی اکثر اپلیکیشن های تک صفحه‌ای (SPA) ما میخوایم مطمئن باشیم که داده‌هایی که از سرور دریافت می‌کنیم، کاملا به‌روز باشن. بنابراین معمولا به دفعات مورد نیاز اونارو از سرور درخواست می‌کنیم که گاهی نیاز به انجام تکرار درخواست‌ها نیست.
توی این یادداشت یه راه‌حل خوب واسه جلوگیری از تکرار درخواست‌های http و cache کردن اونها ارائه میشه:)

همونطور که گفته شد، داده‌هایی وجود دارن که احتمالش کمه موقع تعامل کاربر با برنامه شما تغییر کنن.
به عنوان مثال، فرض کنید یه لیستی از کشورها رو میخواید توی یک dropdown داشته باشید. این لیست می‌تونه فقط یکبار از سرور دریافت بشه و برای تمام استفاده‌های بعدی از این لیست، از داده‌هایی که ذخیره (Cache) شدن استفاده بشه.

یه مثال رایج واسه ارسال درخواست http:

توی کد قبلی هربار که ما متد getData رو صدا بزنیم، یک observable دریافت می‌کنیم، و با subscribe کردن به اون، مجددا یک درخواست HTTP دیگه ارسال می‌کنیم. که این رفتار توی مثالی که زده شد، اصلا خوب نیست!!!

یک راه برای جلوگیری از این اتفاق اینه که بیایم از Subject ها یا به طور خاص از ReplySubject استفاده کنیم. که این روش هم یکم پیچیده میشه و هم روش استانداردی نیست!!

راه بهترش، استفاده از متد ShareReplay هست!

کاری که متد ShareReplay انجام میده اینه که آخرین مقداری که منتشر (Emit) شده رو ذخیره می‌کنه و اون مقدار رو با همه‌ی Subscriber های جدید به اشتراک میذاره. یعنی دقیقا همون چیزی که ما بهش نیاز داشتیم.

برای استفاده از این متد هم کافیه از تابع Pipe استفاده کنیم و توی اون از متد (1)shareReplay استفاده کنیم.
به همین راحتی!

توی نمونه‌ای که اینجا قراردادم، می‌تونید این موضوع رو بهتر مشاهده کنید. و اگه کنسول و network رو بررسی کنید میبینید که تنها یکبار درخواست Http ارسال میشه و برای تمام دفعات بعدی که متد getData رو subscribe کنیم از cache استفاده میشه!

هروقت هم نیاز بود که مجددا داده‌ها از سرور دریافت بشن، کافیه متد clearCache رو صدا بزنید.

امیدوارم این یادداشت کوتاه براتون مفید بوده باشه :)