Как кэшировать вызовы API на dev в Angular?

Question

Angular использует сервер разработки веб-пакетов в качестве прокси для реального API. API иногда работает медленно. Это замедляет интеграцию отладки и пользовательские тесты. Как ввести кеш для вызовов API, который работает только во время разработки и хранит кеш, чтобы он использовался также после перезагрузки приложения?

Answer 1

Есть несколько способов сделать это. Можно использовать прокси с функцией кеширования, например, Squid.

Другое решение - использовать webpack-dev-server, который является частью Angular, для добавления функций кеширования. К сожалению, webpack-dev-сервер плохо документирован, и добавить такую ​​функциональность практически невозможно.

Но есть способ sh это сделать. В коде вашего приложения вам нужно изменить обработчик get:

devCacheGet = true && !environment.production;
get(url: string, ...) { //generic get handler in your service handling all get calls
  if (devCacheGet) {
     if (localStorage.getItem("devCache" + url)) {
         return localStorage.getItem(JSON.parse("devCache" + url));
     }
  }

  result = callAPI(...);
  if (devCacheGet) {
      localStorage.setItem("devCache" + url, JSON.stringify(result));
  }
  return result;
}

Код должен быть изменен для обработки Observables, если вы используете if, и скорректирован в соответствии с базой кода. Но более или менее это идея.

Вы можете включить кеширование с true / false в devCacheGet. Вторая часть условия блокирует включение devCache на этапе производства.

Минусы этого решения в том, что вам нужно помнить, что он включен (я поместил предупреждение в консоль, чтобы запомнить).

Плюсы в том, что при работе над частями, близкими к интеграции, вы работаете с реальными данными из API. Это ускоряет отладку. Если сделать 5 звонков по 2 секунды = 10 секунд. С этим решением время загрузки данных снижается до 5x20 мс = 100 мс. Вы экономите 9,9 секунды на каждой загрузке страницы.

Он не заменяет модульные и интеграционные тесты, но очень помогает в определенных c ситуациях.