.NET 8 Blazor Web App中InteractiveWebAssembly组件如何发起HTTP请求？

一、修复HttpClient服务未注册问题 #

你遇到的There is no registered service of type 'System.Net.Http.HttpClient'错误，核心原因是.NET 8+的Blazor Web App模板默认不再自动注册HttpClient服务，需要手动在Program.cs中完成注册：

• 基础注册方式：

  builder.Services.AddHttpClient();
  

• 如果需要配置API基础地址，可使用命名客户端：

  builder.Services.AddHttpClient("YourApiClient", client =>
  {
      client.BaseAddress = new Uri("https://your-api-domain.com/");
  });
  

注册完成后，就可以在组件中正常注入使用：

@inject HttpClient Http
// 或者使用命名客户端：
@inject IHttpClientFactory HttpClientFactory

// 代码中获取命名客户端：
var httpClient = HttpClientFactory.CreateClient("YourApiClient");

二、正确使用CascadingParameter传递HttpClient #

如果一定要通过级联参数传递HttpClient，需确保父组件正确提供级联值，子组件正确接收：

1. 父组件（如布局组件MainLayout.razor）：
   先注入HttpClient，再通过CascadingValue传递给子组件：

   @inject HttpClient Http
   
   <CascadingValue Value="Http" Name="ApiHttpClient">
       @Body
   </CascadingValue>
   

2. 子组件接收：
   必须指定Name属性匹配父组件的命名，否则会因为类型匹配问题返回null：

   [CascadingParameter(Name = "ApiHttpClient")]
   public HttpClient? Http { get; set; }
   

提示：如果不指定Name，当存在多个同类型级联参数时容易出现匹配错误，显式命名更可靠。另外要确认父组件的HttpClient已经成功注入，否则传递的级联值自然为null。

内容的提问来源于stack exchange，提问作者Ron