A grande vantagem do Blazor é que ele tira proveito de todo o ecossistema do C#/dotnet. Basicamente, tudo o que for compatível com o .NET Standard, se não ferir as políticas de segurança para o WebAssembly, poderá ser utilizado no Blazor. Isso incluí o HttpClient, um recurso do dotnet para realizar requisições HTTP.
O HttpClient é muito utilizado quando uma aplicação cliente precisa se comunicar com uma API REST. Se você já trabalhou com Xamarin.Forms, com certeza já teve que lidar com o HttpClient.
Nesse artigo vamos explorar um pouco o uso do HttpClient no Blazor, e para isso utilizaremos a aplicação de exemplo criada neste artigo aqui com o Visual Studio 2019, ou nesse outro aqui com o VSCode.
No projeto de exemplo criado com o template do Blazor (client-side), já temos um exemplo de como trabalhar com o HttpClient. É o componente FetchData.razor, que iremos explorar nesse artigo
Injetando HttpClient
O HttpClient é um dos serviços que vêm automaticamente registrados no injetor de dependências do Blazor.
Se você abrir o Componente FetchData.razor, verá que o HttpClient é injetado na propriedade Http, como você pode conferir na Figura 1.
Modelo
No exemplo do componente FetchData.razor, iremos fazer um GET através do HttpClient, para retornar informações de previsão do Tempo.
Essas informações estão em um arquivo JSON, que estará disponível na mesma aplicação Web onde a aplicação Blazor ficará hospedada.
Você poderá encontrar esse arquivo JSON no seguinte caminho do seu projeto: wwwroot\sample-data\weather.json. Como você pode conferir na Figura 2, esse JSON possuí uma array de objetos que representam as previsões.
Para podermos fazer um GET com o HttpClient, para retornar essa array de previsões, vamos precisar de uma classe dotnet contendo a mesma estrutura.
É por isso, que dentro do componente FetchData.razor, no bloco @functions, você irá encontrar a classe WeatherForecast. Veja na Figura 3 que a estrutura dessa classe bate com a estrutura de uma previsão do arquivo weather.json.
Métodos do HttpClient
A classe HttpClient faz parte do namespace System.Net.Http, e possuí vários métodos que serão traduzidos em métodos de requisição HTTP. Confira essa lista de métodos na Tabela 1.
| HttpClient | Método HTTP |
| GetAsync() GetByteArrayAsync() GetStreamAsync() GetStringAsync() | GET |
| PostAsync() | POST |
| PutAsync() | PUT |
| PutAsync() | DELETE |
| SendAsync() | TODOS (o método é enviado por parâmetro) |
Tabela 1: Lista de métodos do HttpClient
O Blazor estende alguns dos métodos da classe HttpClient, numa classe do namespace Microsoft.AspNetCore.Components, chamada HttpClientJsonExtensions.
Veja na Tabela 2 a lista de métodos que o HttpClientJsonExtensions estende no HttpClient.
| HttpClient | Método HTTP |
| GetJsonAsync() | GET |
| PostJsonAsync() | POST |
| PutJsonAsync() | PUT |
| SendJsonAsync() | TODOS (o método é enviado por parâmetro) |
Tabela 2: Lista de métodos de extensão do HttpClientJsonExtensions
A importância desses métodos estendidos é que eles vão fazer o trabalho de serialização/desserialização para nós. Todos esses métodos têm uma sobrecarga genérica, que recebe em um T, o tipo que deverá ser usado no processo de serialização/desserialização.
A grande vantagem que vejo nesses métodos, é que aparentemente, com eles não precisaremos depender do NewtonSoft.Json, que é um pacote muito grande e tornaria nossas aplicações Blazor muito pesadas para download.
Mas, ainda estamos numa versão preview, e essa foi a impressão que tive até agora. Pode ser que até a data do lançamento isso mude. Vamos torcer para que eles nos mantenham longe dessa dependência.
GetJsonAsync
E é exatamente o método GetJsonAsync estendido pelo HttpClientJsonExtensions, que é utilizado no exemplo do FetchData.razor.
Veja na Figura 4 que estamos fazendo o GET e desserializando o seu retorno em uma array da classe WeatherForecast.
Veja que o componente tem uma array da classe WeatherForecast, declarada como um atributo com o nome forecasts.
Através do método GetJsonAsync, fazemos um GET HTTP na URL sample-data/weather.json. O JSON retornado pela requisição é então, transformado na array forecasts.
Note que não foi passada a URL completa para a requisição. Isso pois ela sairá do mesmo Host, e portando compartilhará a mesma URL base.
Exibindo o Resultado em HTML
O resultado dessa requisição é exibido pelo Componente FetchData.razor na tabela HTML que você pode ver na Figura 5.
Note que é utilizado um comando foreach do C# para preencher as linhas da table, com o conteúdo da array forecasts.
Uma outra coisa que você pode observar é que a tabela só será renderizada se a array forecasts for diferente de null. Caso contrário a requisição HTTP ainda não foi completada e podemos avisar o usuário que os dados estão sendo carregados, através de um simples texto Loading…
Veja isso no inicio do HTML do componente, como mostra a Figura 6.
Testando
Teste a sua aplicação de exemplo executando o projeto e navegando na opção Fetch Data. Como você pode ver na Figura 7, o resultado da requisição HTTP é apresentado na forma de uma tabela.
Se você abrir as ferramentas de desenvolvedor do seu browser, e forçar um refresh nessa página, poderá ver a requisição HTTP executada pelo browser. Confira na Figura 8.
Essa foi apenas uma introdução sobre o HttpClient. O HttpClient é um recurso bem flexível e irá atender as mais diferentes necessidades que teremos com requisições HTTP. Veremos muito mais sobre o HttpClient em futuros artigos.
Grande Abraço e até o próximo
Blaze of Code 
Um comentário em “HttpClient no Blazor”