WASM 组件中的 Blazor Server 服务实例

Question

在我的具有自动渲染模式的 .NET 8 Blazor Web 应用程序中，到目前为止我一直在使用服务器渲染。在尝试 WASM 时，我注意到我不能只注入服务器服务实例。这是因为它使用自己的运行时 (Porject.Client) 和自己的 DI。

我无法在客户端中创建服务，因为它是对性能要求较高的外部可执行文件的包装。

我当然可以将该服务设为 API，但是 Blazor 执行此操作的方式是什么？

为了减少 WASM 大小并且不暴露服务代码，我已经在客户端中为其创建了一个接口。

Answer 1

在我看来，实现此目的的最佳方法是创建一个 API 控制器，并且 blazor WebAssembly 使用 httpclient 调用此 API 来获取数据并绑定到模型。

HttpClient 和 JSON 帮助程序 (System.Net.Http.Json.HttpClientJsonExtensions) 还用于调用第三方 Web API 端点。 HttpClient 使用浏览器的 Fetch API 实现，并受到其限制，包括同源策略的强制执行，这将在本文后面的跨源资源共享 (CORS) 部分中讨论。

客户端的基地址设置为原始服务器的地址。

更多详情，可以参考以下代码：

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.Services.AddScoped(sp =>
    new HttpClient
    {
        BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
    });

await builder.Build().RunAsync();

然后你可以注入它并使用它，如下所示：

注入服务：

@using System.Net.Http
@inject HttpClient Http

用途：

var response = await Http.PostAsJsonAsync("todoitems", toitem);
var content = await response.Content.ReadFromJsonAsync<WeatherForecast[]>() ??

Array.Empty();

更多详情，可以参考这篇文章。