🔧 Service / http-service by ancientbag · Pull Request #156 · Byndyusoft/ui

ancientbag · 2025-05-12T11:58:33Z

`@byndyusoft-ui/http-service`

Http service

Installation

npm i @byndyusoft-ui/http-service

Usage

To start using this service you need to create a new class instance of HttpService and provide restController option.

There are two classes ready to be used as restControllers: HttpRestControllerFetch and HttpRestControllerAxios. For fetch and axios.

    const restController = new HttpRestControllerFetch();
    const httpService = new HttpService({
        restController
    });

    httpService.get("http://localhost:3000/api/");

Example of usage with HttpRestControllerFetch

    const restController = new HttpRestControllerFetch();
    const httpService = new HttpService({
        restController
    });

    const handleGetProducts = async (): Promise<void> => {
        const products = await httpService
            .get('http://localhost:3322/products')
            .then(async r => (await r.json()) as IProduct[]);

        setProducts(products);
    };

Example of usage with HttpRestControllerAxios

    const restController = new HttpRestControllerAxios();
    const httpService = new HttpService({
        restController
    });

    const handleGetProducts = async (): Promise<void> => {
        const products = await httpService.get<IProduct[]>('http://localhost:3322/products').then(r => r.data);

        setProducts(products);
    };

You can define own HttpRestController and pass it like this

    // myOwnHttpRestController.ts
    import { HttpRestController } from '@byndyusoft-ui/http-service';

    class HttpRestControllerCustom extends HttpRestController {
        constructor() {
            super();
        }

        get = async <R>(url: string, headers?: Headers): Promise<R> => {
            return fetch(url, { method: 'GET', headers: { ...headers } }) as Promise<R>;
        };

        post = async <R>(url: string, body: object, headers?: Headers): Promise<R> => {
            return fetch(url, {
                method: 'POST',
                body: JSON.stringify(body),
                headers: { ...headers }
            }) as Promise<R>;
        };

        patch = async <R>(url: string, body: object, headers?: Headers): Promise<R> => {
            return fetch(url, {
                method: 'PATCH',
                body: JSON.stringify(body),
                headers: { ...headers }
            }) as Promise<R>;
        };

        put = async <R>(url: string, body: object, headers?: Headers): Promise<R> => {
            return fetch(url, {
                method: 'PUT',
                body: JSON.stringify(body),
                headers: { ...headers }
            }) as Promise<R>;
        };

        delete = async <R>(url: string, body: object = {}, headers?: Headers): Promise<R> => {
            return fetch(url, {
                method: 'DELETE',
                body: JSON.stringify(body),
                headers: { ...headers }
            }) as Promise<R>;
        };
    }

    export default HttpRestControllerCustom;

    // httpService.ts
    import HttpRestControllerCustom from './myOwnHttpRestController.ts'

    const restController = new HttpRestControllerCustom();
    const httpService = new HttpService({
        restController
    });

    httpService.get("http://localhost:3000/api/");

sadcitizen

Идея с единым фасадом для axios и fetch мне нравится, но в текущей реализации сам сервис по сути ничего не делает, а вся логика лежит в контроллерах.

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

sadcitizen · 2025-05-12T14:14:38Z

services/http-service/src/restController.ts

@@ -0,0 +1,16 @@
+abstract class HttpRestController {


Для чего слово Rest в названии?

Предполагалось что данная сущность будет рулить GET, POST, ..., запросами.

sadcitizen · 2025-05-12T14:15:56Z

services/http-service/src/restController.ts

@@ -0,0 +1,16 @@
+abstract class HttpRestController {
+    abstract get<R>(...args: any[]): Promise<R>;


Я бы у этих методов задал более жесткие контракты. У каждого метода есть url, есть параметры, у некоторых точно должно быть тело запроса или хотя бы null.

Можно попробовать. В текущей реализции просто больше свободы

Если нужна свобода, то тогда зачем типизация? Она ограничивает свободу.

sadcitizen · 2025-05-12T14:16:27Z

services/http-service/src/restController.ts

+    abstract patch<R>(...args: any[]): Promise<R>;
+    abstract put<R>(...args: any[]): Promise<R>;
+    abstract delete<R>(...args: any[]): Promise<R>;
+    public setHeader: (...args: any[]) => void;


А как мне задать baseUrl или timeout для запросов?

Это можно добавить. Пока только напрямую через инстанс контроллера

sadcitizen · 2025-05-13T04:49:46Z

services/http-service/src/httpService.ts

+import { IHttpServiceOptions } from './httpService.types';
+import HttpRestController from './restController';
+
+class HttpService<RestController extends HttpRestController> {


Зачем нужна ещё одна сущность, если запросы можно контроллером дергать?

Хотел сделать чтобы главный класс делал базовые штуки, по типу установки хэдеров, таймаутов, бейсурл, но в конечном счете, кажется, что действительно, проще через описанный класс контроллера это сделать =(

sadcitizen · 2025-05-13T05:05:48Z

services/http-service/src/constants/axiosRestController.ts

+        this.axiosInstance.defaults.headers[key] = value;
+    };
+
+    get = async <T, R = AxiosResponse<T>>(url: string, params: object = {}, options: object = {}): Promise<R> => {


Тут слабая типизация и тип AxiosResponse будет торчать наружу.

Не понял проблемы

Я этот подход взял с ЛМ АТ :)

object использовать нельзя

sadcitizen · 2025-05-13T05:09:08Z

services/http-service/src/constants/fetchRestController.ts

+    post = async <R = Response>(url: string, body: object, headers?: Headers): Promise<R> => {
+        return fetch(url, {
+            method: 'POST',
+            body: JSON.stringify(body),


А если body нет?

body обязательный параметр

Я могу методом post мутировать какое-то состояние на сервере, при этом в запросе не будет никакого тела. Например, запрос POST https://blablabla.com/things/1/do-something будет менять статус сущности согласно статусной модели, но в самом запросе нет тела.

sadcitizen · 2025-05-13T05:46:17Z

Класс или тип ошибки тоже, кстати, можно свои определить. Можно учесть network error.

ancientbag · 2025-05-13T06:00:14Z

Класс или тип ошибки тоже, кстати, можно свои определить. Можно учесть network error.

Я не вижу как типы ошибок использовать в этом сервисе. Он больше про инфраструктурный сетап http пакетов. Например, если я буду использовать use-query от tanstack, то там в ответе можно добраться до кода ошибки, единственное, что он у них там не типизирован, там просто Number (во всяком случае, в тех версиях, которыми я пользовался)

ancientbag · 2025-05-13T06:01:41Z

Идея с единым фасадом для axios и fetch мне нравится, но в текущей реализации сам сервис по сути ничего не делает, а вся логика лежит в контроллерах.

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

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

sadcitizen · 2025-05-13T06:35:52Z

Класс или тип ошибки тоже, кстати, можно свои определить. Можно учесть network error.

Я не вижу как типы ошибок использовать в этом сервисе. Он больше про инфраструктурный сетап http пакетов. Например, если я буду использовать use-query от tanstack, то там в ответе можно добраться до кода ошибки, единственное, что он у них там не типизирован, там просто Number (во всяком случае, в тех версиях, которыми я пользовался)

У тебя запрос может выполнится удачно или с ошибкой. То есть ошибка это результат вызова, почему её надо где-то отдельно держать? А тип ошибки это параметр самой ошибки.

sadcitizen · 2025-05-13T06:37:22Z

Идея с единым фасадом для axios и fetch мне нравится, но в текущей реализации сам сервис по сути ничего не делает, а вся логика лежит в контроллерах.
Хочется сначала собрать все варианты использования этого сервиса. Их много в наших проектах. И от них уже отталкиваться при разработке.

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

Нужно описать контракт сервиса, который бы покрыл большинство типовых сценариев. А сервисы на базе fetch или axios будут реализациями этого контракта.

sadcitizen · 2025-05-13T07:11:14Z

Я бы ещё переименовал пакет в http-client. Общепринятое название.

SmorodinVik · 2025-05-22T07:43:07Z

Изучил как мы используем axios на наших проектах и есть ощущение, что в большинстве случаев его можно заменить на
более легкую обертку над fetch.

Список того что нам нужно:

Запросы get, post, patch, put, delete
Возможность определния базового url
Возможность определение токена авторизации
Механизм обновления токена
Отменяемые запросы
Типизация возвращаемых ответов и ошибок
Возможность передавать объект с параметрами запроса которые преобразуются в query params и добавляются к урлу

ancientbag added 16 commits May 5, 2025 17:47

feat: init

d255227

feat: rest methods

e7da701

feat: refactor

6c4752b

feat: refactor, reexports

77756ca

feat: refactor

8b6d253

docs: readme upd

a899bb8

feat: axios added for package.json

c37cc40

feat: package lock upd

a267aef

feat: refactor and setHeader method added

4cea0ea

feat: fetch controller json response formatter

5d11bb4

feat: workaround for Headers collection for fetch

57b93f2

docs: readme upd

6833ccd

feat: request => service

4b951d9

feat: request => service

3654e84

feat: request => service

e292813

docs: upd

2f791a3

ancientbag marked this pull request as ready for review May 12, 2025 12:02

ancientbag changed the title ~~Service / http-service~~ 🔧 Service / http-service May 12, 2025

ancientbag added 2 commits May 12, 2025 17:25

feat: folder rename

21d70a4

docs: readme upd

f29ecaf

sadcitizen requested changes May 13, 2025

View reviewed changes

		@@ -0,0 +1,16 @@
		abstract class HttpRestController {
		abstract get<R>(...args: any[]): Promise<R>;

Comments

Conversation

ancientbag commented May 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

@byndyusoft-ui/http-service

Installation

Usage

To start using this service you need to create a new class instance of HttpService and provide restController option.

Example of usage with HttpRestControllerFetch

Example of usage with HttpRestControllerAxios

You can define own HttpRestController and pass it like this

Uh oh!

sadcitizen left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sadcitizen commented May 13, 2025

Uh oh!

ancientbag commented May 13, 2025

Uh oh!

ancientbag commented May 13, 2025

Uh oh!

sadcitizen commented May 13, 2025

Uh oh!

sadcitizen commented May 13, 2025

Uh oh!

sadcitizen commented May 13, 2025

Uh oh!

SmorodinVik commented May 22, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ancientbag commented May 12, 2025 •

edited

Loading

`@byndyusoft-ui/http-service`