React Http Request Handler (RH2) — это библиотека, цель которой — упростить вызовы HTTP в приложении React. Одним из ее достоинств является то, что ее можно использовать как для веб-приложения (ReactJs), так и для мобильного приложения (React Native).
Еще одно преимущество RH2, он избавляет от эффектов, которые необходимы, когда вы хотите сделать HTTP-запросы. Как можно обойтись без них? Rh2 реализует это внутренне, он снимает с вас эту задачу.
Вызовы к сервисам, которые вам придется делать, будут осуществляться с помощью библиотеки Axios, она используется для выполнения запросов, ее разнообразные настройки побудили нас принять ее. Для использования RH2 мы создали хуки, вам просто нужно передать им конфигурацию Axios в качестве параметра, а также дополнительные параметры, которые являются необязательными. Эти параметры помогут вам максимально использовать возможности RH2.
Остальная часть этой статьи основана на документации: Есть ссылки на классы, подробности вы можете найти по ссылке ниже.
react-http-request-handler — npm
Эта библиотека React, использующая настраиваемые хуки, призвана помочь пользователям в обработке HTTP-запросов. Запрос и его триггер просто конфигурируются, а затем выполняются Axios. Дополнительные параметры также могут быть настроены в зависимости от потребностей веб-клиента. Например :. Последняя версия: 1.1.1, последняя публикация: 21 час назад. Начните использовать react-http-request-handler в своем проекте, запустив `npm i react-http-request-handler`. В реестре npm нет других проектов, использующих react-http-request-handler.
npmjs.com Для начала нам нужно установить библиотеку с помощью следующей команды :
Версия библиотеки на момент написания этой статьи — 1.1.1.
В исходниках проекта есть папка с именем example, в которой вы можете посмотреть примеры конфигурации (будьте осторожны, это немного беспорядочно…).
import React from 'react';
import { Rh2InitializationParameter, Rh2Initializer } from "react-http-request-handler";
import App from "./App";
const initSettings: Rh2InitializationParameter = {
debugMode: true
};
<Rh2Initializer rh2Settings={initSettings}>
<App />
</Rh2Initializer>
В этом примере есть два важных элемента. В свойстве initSettings стоит объект типа Rh2InitializationParameter с активацией режима отладки в качестве параметра. В этом режиме будут отображаться журналы, чтобы помочь понять, если что-то идет не так, как ожидалось.
Для инициализации доступны и другие свойства. Например, вы можете передать метод, который будет выполняться в случае ошибки в HTTP-запросе (500, 400 и т.д…), пример есть в документации.
Затем initSettings передается в качестве входных данных компоненту Rh2Initializer. Если вы не хотите передавать никаких настроек, это вполне возможно. Вам просто нужно будет обернуть ваше приложение компонентом без передачи каких-либо параметров.
Чтобы понять интерес этой фазы, хорошо бы знать, для чего она нужна. Здесь мы имеем пример с конфигурацией, которая практически самая маленькая.
Если вы продвинетесь немного дальше, то заметите, что можно настроить несколько параметров таким образом, чтобы библиотека генерировала столько экземпляров Axios, сколько вам нужно. Эти экземпляры будут идентифицированы ключом, это позволит вам выполнить HTTP-запрос с выбранным вами экземпляром, если ни один из них не определен для выполнения запроса, не паникуйте. Мы позаботились о том, чтобы конфигурация была как можно более простой, поэтому, если ключ не заполнен, мы берем первый доступный экземпляр (порядок экземпляров эквивалентен порядку информации, предоставленной во время конфигурации).
В нашем примере мы ничего не настраивали по этому поводу, поэтому RH2 инициализирует экземпляр по умолчанию.
В заключение этой темы интересно узнать следующую информацию. Хотя react-http-request-handler создан для того, чтобы помочь вам самостоятельно управлять выполнением HTTP-запросов, вы можете восстановить сгенерированные экземпляры Axios. Это может быть полезно, если мы не справились с нужным вам случаем или если вам нужно создать собственный перехватчик.
Сервис для восстановления экземпляров — rh2ConfigService, можно восстановить все экземпляры или только один с его ключом.
Чтобы продолжить, я приведу пример использования. Чтобы все было очень просто, я не буду завершать представленную выше конфигурацию. Это означает, что RH2 будет использовать экземпляр, созданный по умолчанию.
import { AxiosRequestConfig, Rh2AxiosConfig, rh2AxiosConfigService } from "react-http-request-handler";
const axiosConfig: AxiosRequestConfig = {
url: 'https://jsonplaceholder.typicode.com/todos',
method: 'GET'
};
const configACharger: Rh2AxiosConfig = {
label: 'TEST',
axiosRequestConfig: axiosConfig
};
rh2AxiosConfigService.addConfigAxios(configACharger);
Этот пример показывает, как добавить новую конфигурацию в библиотеку. Не все конфигурации нужно сохранять. В нашем случае мы хотим познакомить вас с использованием хука useRh2WithName, он позволяет выполнить запрос по его метке. На случай, если вы не хотите сохранять конфигурацию, существует хук useRh2WithParameters.
Этот пример состоит из трех частей, прежде всего, мы настраиваем информацию, относящуюся к запросу, который мы хотим выполнить, url и тип запроса.
Затем, эта конфигурация объединяется с конфигурацией RH2, мы ввели метку с именем TEST, это для идентификации этой конфигурации, вы можете добавить столько, сколько вам нужно.
Наш тип Rh2AxiosConfig относится к классу Rh2EffectAxiosConfigHandler, среди возможных параметров есть обработка запроса, если он завершается ошибкой или успехом. Если при инициализации библиотеки через Rh2InitializationParameter была определена конфигурация ошибки, а мы переопределили конфигурацию для этого запроса, то эта конфигурация будет использована первой. Это был пример, другие очень полезные свойства можно найти в документации.
В последней строке мы можем прочитать, какой сервис используется для добавления конфигурации.
import { useRh2WithName } from "react-http-request-handler";
const testWithName = useRh2WithName('TEST');
console.log(testWithName);
В компоненте React все еще нужно вызвать наш хук useRh2WithName с его меткой, чтобы выполнить запрос к jsonplaceholder. Ниже мы опишем, что будет отображаться в журнале.
Выше у нас есть три разных журнала, это три разных состояния нашего ранее настроенного запроса.
В первом случае наш компонент загружается в первый раз, все статусы инициализированы в false, потому что обработка не началась.
Второй журнал показывает нам, что компонент прочитал вызов хука useRh2WithName, запрос загружается.
Последний позволяет увидеть, что запрос завершен успешно, в свойстве data содержится результат вызванного запроса. При настройке запросов вы можете приказать возвращать только результат этого запроса (значение по умолчанию) или всю информацию с помощью свойства onlyResult. Пример приведен ниже.
Целью данной статьи является представление библиотеки React Http Request Handler (RH2), представленный пример был максимально прост в плане настройки. Возможно введение нескольких настроек. Если у вас возникли проблемы, вы хотите иметь другие возможности или поделиться чем-то еще, добро пожаловать в сообщество. Форум для обсуждения находится здесь -> Обсуждение