Meus Documentos

Barra Lateral Multi-raiz

flex-layout

  • Getting Started

  • Guides

  • Reference

typed-rx-http

  • Getting Started

  • Guides

  • Reference

global-rx-state

  • Getting Started

  • Guides

  • Reference

webflux-fe-dev-assistant

reactive-mongo-dsl

Cliente HTTP

Primeiro, explicarei como usar diretamente o cliente Core, e em seguida, explicarei o adaptador HTTP compartilhado do projeto que é usado pelo serviço gerado automaticamente como um exemplo de integração opcional.


Uso direto do cliente Core

Os Paths injetados em createHttpClient<Paths>() são o contrato da requisição. A URL e o método são definidos pela chave de Paths, queryString e pathVariable são definidos nos parâmetros, e o corpo é determinado pelo requestBody.

O tipo de resposta é especificado pelo chamador em callApi<R>(). O Core não infere automaticamente o tipo de resposta a partir das respostas do OpenAPI.

httpClient.ts
ts
A forma da resposta é escolhida por API.

typed-rx-http não força o uso de ResponseWrapper. Se a resposta do servidor for um wrapper, especifique o tipo do wrapper como R, caso contrário, especifique o tipo real da resposta.

ts

Opcional: adaptador compartilhado do projeto + serviço gerado automaticamente.

A configuração do commonService abaixo não é uma estrutura obrigatória do Core, mas sim um padrão de integração de projeto que aplica autenticação, cabeçalhos SSR e políticas de cache a vários serviços gerados ao mesmo tempo.

O que o commonService do projeto faz.

commonService não é um nome de classe especial fornecido por @byeolnaerim/typed-rx-http, mas refere-se a um arquivo de propriedade do usuário usado para reunir políticas HTTP comuns do projeto em um só lugar. O nome do arquivo é livre e no exemplo abaixo usamos o nome real do projeto, rxjsHttpService.ts.

Em vez de repetir createHttpClient em cada tela e serviço gerado automaticamente, usamos callApi e callApiStream gerados por este arquivo como um ponto de entrada comum. Portanto, se você modificar as regras de renovação de autenticação, transmissão de cabeçalho SSR, cache e tratamento de erros uma vez, isso se aplicará a todos os serviços gerados.

Comece a ver o código completo do commonService/rxjsHttpService.
1. Mínimo funcional

A essência do commonService é o código abaixo. Crie uma vez o headerStore e o cliente HTTP tipado, e exporte callApi/callApiStream que o serviço gerado usará em comum. uploadFile e createSSEObservable também podem ser expostos a partir do mesmo cliente.

rxjsHttpService.ts
ts
2. Next.js + autenticação de sessão + cache CSR/SSR incluído como uma extensão

Abaixo está um exemplo completo do projeto que adiciona autenticação de sessão, cabeçalho SSR e cache CSR/SSR ao mesmo adaptador público. Se o serviço gerado importar o wrapper de cache, esta forma será a referência. Basta copiar, ajustar a importação de setLogin, a posição de ApiTypes e CacheNames, o caminho da API de autenticação, as variáveis de ambiente e o caminho de não autorizado para se adequar ao seu projeto.

rxjsHttpService.ts
ts
Função por composição de código

paths

Tipo de caminhos OpenAPI usado quando createHttpClient e ServiceArguments verificam URL, método, variável de caminho, consulta e tipo de corpo.

headerStore

Armazena cabeçalhos comuns como Content-Type e Authorization no navegador e compartilha com autenticação de sessão e conexão RSocket.

headersProvider

CSR retorna headerStore e SSR lê os Cookies e Authorization da solicitação atual, fornecendo cabeçalhos diferentes para cada solicitação.

service

Cliente HTTP tipado real com URL base, cabeçalho comum, tratamento de 401 do servidor e mensagem de erro padrão.

sessionAuth

Sincroniza o token de sessão antes da solicitação e, se 401, tenta novamente o Observable original após o refresh; se falhar, executa o fluxo de logout.

callApi / callApiStream

Função comum importada por serviços REST gerados automaticamente e serviços de stream NDJSON. Ambos retornam um Observable RxJS.

callApiClientCache / callApiServerCache

Wrapper de cache que usa o cache CSR no navegador e carrega dinamicamente o cache SSR de @byeolnaerim/typed-rx-http/next no servidor.

Forma de conexão com o serviço gerado automaticamente

O gerador calcula o caminho relativo do commonServiceFile e insere a importação em cada serviço. A tela importa funções geradas sem chamar diretamente o arquivo público, e a função gerada converte path, params, body em pathVariable, queryString, body de ServiceArguments para passar para callApi.

generateSwagger.cjs
js
Uma única resposta é firstValueFrom.

APIs REST que respondem uma vez e terminam, como busca, armazenamento e exclusão, podem ser recebidas como Observable gerado.firstValueFromAssim, podem ser usadas naturalmente dentro de funções assíncronas existentes.

BusinessSearchPage.tsx
tsx

Na tela, parâmetrosapenas aparece, mas dentro do serviço gerado estão a URL, o método HTTP e o tipo de resposta. Os parâmetros de consulta são sempre{ params: { ... } }passados como.

Vários respostas são inscritas

Solicitações que recebem vários valores, como progresso de trabalho ou fluxo RSocketsubscribesão recebidas e a assinatura é cancelada quando o componente desaparece.

BatchJobPage.tsx
tsx
Quando você usa callApi diretamente

Em projetos que não usam o gerador de serviços ou ao verificar um endpoint temporário antes da geração, você pode chamar diretamente callApi do serviço público. O tipo de solicitação é verificado nos caminhos e o tipo de resposta é especificado genericamente pelo chamador.

TemporaryService.ts
ts
© 2026 Byeolnaerim. Todos os direitos reservados.IntroduçãoPolítica de Privacidade