Больше не новость, что Angular представил концепцию HTTP-перехватчиков.

При перехвате вы объявляете перехватчики, которые проверяют и преобразуют HTTP-запросы от вашего приложения к серверу. Те же перехватчики могут также проверять и преобразовывать ответы сервера на обратном пути к приложению.

Написать перехватчик так же просто, как определить класс, реализующий интерфейс HttpInterceptor, а затем предоставить его основному модулю AppModule. Но перехватчики не ограничиваются только «проверкой и преобразованием HTTP-запросов», они могут делать гораздо больше!

В этом примере мы собираемся создать перехватчик для подделки внутреннего сервера в целях разработки. Фактическим вариантом использования для этого было тестирование поведения приложения в случае ошибок сервера.

Начиная

Прежде всего, нам нужно создать базовую структуру нашего перехватчика и предоставить ее в нашем основном AppModule:

Обратите внимание, что вы можете определить несколько перехватчиков, поэтому порядок имеет значение! Перехватчики выполняются сверху вниз для исходящих запросов и снизу вверх для входящих ответов сервера.

Этот простой код позволит пройти любой запрос нетронутым. Поскольку это не то, что мы хотим, мы добавим некоторую простую логику, чтобы проверить, находимся ли мы на локальном хосте (мы, вероятно, не хотим, чтобы этот перехватчик в производстве), и если у нас есть конфигурация для текущего URL.

Как видите, код довольно прост: все волшебство происходит внутри метода buildHTTPResponse. Здесь мы получаем конфигурацию URL-адреса и проверяем, должен ли он быть HttpResponse (статус 200) или HttpErrorResponse (статус ›400):

Вот и все! Все, что осталось сделать, это настроить его с помощью определенного нами свойства mimicConfiguration. Вы можете сохранить свою конфигурацию в встроенном режиме (для небольших ответов JSON) или просто определить ее в отдельном файле и импортировать.

Подведение итогов

Прежде чем придумать этот код, я пытался достичь тех же результатов, используя включенную конфигурацию прокси-сервера webpack dev-server + json-server, но тот факт, что мне нужно использовать localhost в качестве конечной точки API, заставляет меня иметь полную работающую бэкэнд.

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

Дайте мне знать, если у вас есть предложения, улучшения или альтернативные способы достижения той же цели.

Спасибо за внимание, вот полный код: