在我的前篇文章《Blazor Server 应用程序中进行 HTTP 请求》中，我介绍了在 Blazor Server 应用程序中进行 HTTP 请求的相关技术，在 Blazor Server App 中您可以访问所有的 .NET 类库和组件。但如果您创建的是 Blazor WebAssembly 应用程序，那么您的代码将在客户端的浏览器沙箱中运行，您的选择在某种程度上会受到限制。在本教程中，我将向您展示如何在 Blazor WebAssembly 应用程序进行 HTTP 请求。

Blazor WebAssembly 应用程序中的 HttpClient 概述

Blazor WebAssembly 应用程序使用预置的 HttpClient 服务调用 Web API。这个预置的 HttpClient 是使用浏览器的 Fetch API[2]?实现的，会有一些限制。HttpClient 还可以使用 Blazor JSON 帮助程序或 HttpRequestMessage 对象进行 API 调用。默认情况下，您只能向同源服务器发送 API 调用请求，不过如果第三方 API 支持跨域资源共享(CORS)的话，您也可以调用其他服务器上的 API。

命名空间 System.Net.Http.Json 为使用 System.Text.Json 执行自动序列化和反序列化的 HttpClient 提供了扩展方法。这些扩展方法将请求发送到一个 Web API URI 并处理相应的响应。常用的方法有：

• GetFromJsonAsync：发送 HTTP GET 请求，并将 JSON 响应正文解析成一个对象。

• PostAsJsonAsync：将 POST 请求发送到指定的 URI，并在请求正文中载有序列化为 JSON 的?value。

• PutAsJsonAsync：发送 HTTP PUT 请求，其中包含 JSON 编码的内容。

要理解如何将这些方法与 HttpClient 一起使用，我们需要创建两个项目。第一个项目是一个 Web API 项目，它向客户端公开一个 Web API。第二个项目是 Blazor WebAssembly 应用程序，它向第一个项目中创建的 Web API 发送 HTTP 请求。

实现一个 ASP.NET Core Web API

在本节中，我们将实现一个支持跨域资源共享 (CORS) 的 Web API，以便 Blazor WebAssembly 应用程序可以调用此 API。在 Visual Studio 2019 中创建一个新的 Web API 项目?BlazorClientWebAPI。我们将创建一个简单的 API 来返回产品列表，所以首先要在项目中创建一个?Models?文件夹，并在其中添加如下的?Product?类。

Product.cs

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

[Route("api/[controller]")]
[ApiController]
public class ProductsController : ControllerBase
{
    [HttpGet]
    public IActionResult GetProducts()
    {
        var products = new List<Product>()
        {
            new Product()
            {
                Id = 1,
                Name = "Wireless Mouse",
                Price = 29.99m
            },
            new Product()
            {
                Id = 2,
                Name = "HP Headphone",
                Price = 79.99m
            },
            new Product()
            {
                Id = 3,
                Name = "Sony Keyboard",
                Price = 119.99m
            }
        };
 
        return Ok(products);
    }
}

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(policy =>
    {
        policy.AddPolicy("CorsPolicy", opt => opt
            .AllowAnyOrigin()
            .AllowAnyHeader()
            .AllowAnyMethod());
    });
 
    services.AddControllers();
}

app.UseCors("CorsPolicy");

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
   <PropertyGroup>
      <TargetFramework>net5.0</TargetFramework>
   </PropertyGroup>
   <ItemGroup>
      <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.1" />
      <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.1" PrivateAssets="all" />
      <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
   </ItemGroup>
</Project>

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("#app");
 
    builder.Services.AddScoped(sp => new HttpClient
    {
        BaseAddress = new Uri("http://localhost:5000/api/")
    }); 
 
    await builder.Build().RunAsync();
}

@page "/products"
 
<h1>Products</h1>
 
@if (products == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in products)
            {
                <tr>
                    <td>@forecast.Id</td>
                    <td>@forecast.Name</td>
                    <td>@forecast.Price</td>
                </tr>
            }
        </tbody>
    </table>
}

public partial class Products
{
    private List<Product> products;
 
    [Inject]
    private HttpClient Http { get; set; }
 
    protected override async Task OnInitializedAsync()
    {
        products = await Http.GetFromJsonAsync<List<Product>>("products");
    } 
}

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}