Говоря простыми словами, это больше контрольная точка для каждого действия http.Каждый вызов API, который был сделан, проходит через этот перехватчик.
Итак, почему два перехватчика?
Вызов API состоит из двух половинок: запроса и ответа.Поскольку он ведет себя как контрольная точка, запрос и ответ имеют отдельные перехватчики.
В некоторых случаях использования перехватчика запроса -
Предположим, вы хотите проверить перед отправкой запроса, действительны ли ваши учетные данные?Таким образом, вместо того, чтобы фактически делать вызов API, вы можете проверить его на уровне перехватчика, который является действительными вашими учетными данными.
Предположим, вам нужно присоединить токен к каждому выполненному запросу, вместо дублирования логики добавления токена впри каждом вызове axios вы можете создать перехватчик, который присоединяет токен к каждому отправляемому запросу.
Некоторые варианты использования перехватчика ответа -
Предположим, вы получили ответ и, судя по ответам APIвы хотите сделать вывод, что пользователь вошел в систему. Таким образом, в перехватчике ответов вы можете инициализировать класс, который обрабатывает состояние пользователя, вошедшего в систему, и соответствующим образом обновить его в полученном вами объекте ответа.некоторые API с действительными учетными данными API, но у вас нет действительной роли для доступа к данным.Таким образом, вы можете вызвать предупреждение от перехватчика ответа о том, что пользователь не разрешен.Таким образом вы будете защищены от неавторизованной обработки ошибок API, которую вам придется выполнять при каждом запросе Axios, который вы сделали.
Возможно, вы уже сейчас найдете эти варианты использования.
Надеждаэто помогает:)
EDIT
Поскольку этот ответ набирает обороты, вот несколько примеров кода
Перехватчик запросов
=> Можно распечатать объект конфигурации axios (если необходимо), выполнив (в этом случае, проверив переменную окружения):
const DEBUG = process.env.NODE_ENV === "development";
axios.interceptors.request.use((config) => {
/** In dev, intercepts request and logs it into console for dev */
if (DEBUG) { console.info("✉️ ", config); }
return config;
}, (error) => {
if (DEBUG) { console.error("✉️ ", error); }
return Promise.reject(error);
});
=> Если вы хотитепроверьте, какие передаваемые заголовки / добавьте более общие заголовки, это доступно в объекте config.headers.Например:
axios.interceptors.request.use((config) => {
config.headers.genericKey = "someGenericValue";
return config;
}, (error) => {
return Promise.reject(error);
});
=> В случае запроса GET отправляемые параметры запроса можно найти в объекте config.params.
Перехватчик ответа
=> Вы даже можете опционально проанализировать ответ API на уровне перехватчика и передать проанализированный ответ вниз вместо исходного ответа.Это может сэкономить вам время на написание логики синтаксического анализа снова и снова, если API используется одинаково в нескольких местах.Один из способов сделать это - передать дополнительный параметр в api-request и использовать тот же параметр в перехватчике ответов для выполнения вашего действия.Например:
//Assume we pass an extra parameter "parse: true"
axios.get("/city-list", { parse: true });
Однажды в перехватчике ответа мы можем использовать его следующим образом:
axios.interceptors.response.use((response) => {
if (response.config.parse) {
//perform the manipulation here and change the response object
}
return response;
}, (error) => {
return Promise.reject(error.message);
});
Итак, в этом случае, когда в * есть объект parse1058 *, манипуляция выполнена, в остальных случаях она будет работать как есть.
=> Вы даже можете просмотреть прибывающие коды HTTP и затем принять решение.Например:
axios.interceptors.response.use((response) => {
if(response.status === 401) {
alert("You are not authorized");
}
return response;
}, (error) => {
if (error.response && error.response.data) {
return Promise.reject(error.response.data);
}
return Promise.reject(error.message);
});