Напишите перехватчики с наддувом для своего приложения React.
По сути, React - это просто библиотека представлений, которая значительно облегчает вам жизнь по обновлению DOM и управлению состоянием. Он снимает с себя большую часть тяжелой работы по управлению и заботе о части просмотра вашего красивого пользовательского интерфейса.
Я полнофункциональный инженер, постоянно работающий со всеми тремя основными UI-фреймворками JavaScript - Angular, React и Vue.js. Как только я перехожу с одной системы на другую, я чувствую много вещей, которые мне нравятся, а также то, что мне не очень нравится в другой структуре. Но в зависимости от вашего варианта использования - или иногда из-за бизнес-необходимости, обусловленной множеством факторов - вы должны тщательно выбирать свой арсенал.
Angular - это полностью загруженный от батареи фреймворк, за которым следует Vue.js, а затем React, который во многом зависит от множества сторонних библиотек. Но с его популярностью или объявлениями о вакансиях React по-прежнему является крупным победителем в зависимости от того, к какой части мира вы принадлежите.
Как разработчик, в моем сердце очень много места для всех этих фреймворков, и это некоторые удивительные технологии, свидетелями которых мы являемся. Я не буду вдаваться в подробности сравнения этих трех, поскольку в Интернете полно таких статей. Однако я сравню эти 3, чтобы помочь вам выбрать лучшее в зависимости от вашего опыта и вашего варианта использования.
Проблемное пространство
Каждый динамический пользовательский интерфейс должен взаимодействовать с серверной частью, и наиболее популярный способ сделать это - использовать HTTP-вызовы. В большинстве случаев существует определенная часть кода, которая может быть заголовком или определенной операцией, которую необходимо выполнить для HTTP-вызова перед отправкой запроса или после получения ответа.
Решение
С Angular это просто и добавлено как функция в модуль @ angular / common / http, предоставляемый Angular.
Если это интересно, вы можете следить за ним:
Но наша цель в другом. Нам нужна аналогичная функциональность в React. Перехватчик, который что-то делает перед отправкой запроса и получением ответа.
Набор инструментов, который мы собираемся использовать:
"axios": "^0.21.1",
Axios - очень широко используемая библиотека, и вы найдете ее интеграцию во многие проекты в Интернете.
Все остальное будет таким же, как и все основные вещи, предлагаемые приложением create-react-app.
В этом уроке для начинающих мы сделаем 2 перехватчика.
Базовая настройка:
import axios from "axios";
import errorInterceptor from "./interceptors/error";
import updateHeaderInterceptor from "./interceptors/updateHeader";
const httpClient = axios.create({
baseURL: process.env.REACT_APP_API_URL,
});
errorInterceptor(httpClient);
updateHeaderInterceptor(httpClient);
export default httpClient;
Вызов вызова:
React.useEffect(() => {
httpClient.get("/");
}, []);
Перехватчик запросов:
Это перехватчик, который находится между всеми вашими запросами и присоединяет токен JWT ко всем запросам для аутентификации нашего клиента. JWT вот пример. Вы можете делать с запросом самые разные штуки до того, как он будет отправлен.
const updateHeaderInterceptor = (axiosInstance) => {
axiosInstance.interceptors.request.use((config) => {
const jwtToken = "Bearer Token from Localstorage";
config.headers["Authorization"] = jwtToken;
return config;
},(error) => {
});
};
export default updateHeaderInterceptor;
Мы можем видеть авторизацию, прикрепленную нашим перехватчиком с этим шаблоном. Мы могли бы добавить наш токен JWT ко всем нашим запросам с помощью всего нескольких строк кода.
Ответный перехватчик:
const DEBUG = process.env.REACT_APP_NODE_ENV !== "production";
const errorInterceptor = (axiosInstance) => {
axiosInstance.interceptors.response.use((response) => {
//Response Successful
},(error) => {
if (error?.status?.code === 401) {
//Unauthorized
//redirect to Login
} else {
//dispatch your error in a more user friendly manner
if (DEBUG) {
//easier debugging
console.group("Error");
console.log(error);
console.groupEnd();
}
}
});
};
export default errorInterceptor;
Здесь мы видим ошибку нашей группы консоли, поскольку у нас нет серверной части, связанной с нашим пользовательским интерфейсом.
Ближе к концу это был очень простой учебник, и мы могли увидеть потенциал того, сколько мы можем сделать, используя этот шаблон с очень небольшим количеством строк кода. Мы можем управлять всей нашей обработкой ошибок в одном месте и вместе с этим иметь общие шаблоны в их собственных перехватчиках, что делает их очень простыми для понимания и повседневной работы.
Следите за обновлениями реальных проблем и их решений от меня как инженера и архитектора полного цикла. Мир!
Больше контента на plainenglish.io
