翻譯自 Waqas Anwar 2021年5月13日的文章?《Making HTTP Requests in Blazor WebAssembly Apps》?^[1]

在我的前篇文章《Blazor Server 應(yīng)用程序中進行 HTTP 請求》中，我介紹了在 Blazor Server 應(yīng)用程序中進行 HTTP 請求的相關(guān)技術(shù)，在 Blazor Server App 中您可以訪問所有的 .NET 類庫和組件。但如果您創(chuàng)建的是 Blazor WebAssembly 應(yīng)用程序，那么您的代碼將在客戶端的瀏覽器沙箱中運行，您的選擇在某種程度上會受到限制。在本教程中，我將向您展示如何在 Blazor WebAssembly 應(yīng)用程序進行 HTTP 請求。

Blazor WebAssembly 應(yīng)用程序中的 HttpClient 概述

Blazor WebAssembly 應(yīng)用程序使用預(yù)置的 HttpClient 服務(wù)調(diào)用 Web API。這個預(yù)置的 HttpClient 是使用瀏覽器的 Fetch API^[2]?實現(xiàn)的，會有一些限制。HttpClient 還可以使用 Blazor JSON 幫助程序或 HttpRequestMessage 對象進行 API 調(diào)用。默認情況下，您只能向同源服務(wù)器發(fā)送 API 調(diào)用請求，不過如果第三方 API 支持跨域資源共享(CORS)的話，您也可以調(diào)用其他服務(wù)器上的 API。

命名空間 System.Net.Http.Json 為使用 System.Text.Json 執(zhí)行自動序列化和反序列化的 HttpClient 提供了擴展方法。這些擴展方法將請求發(fā)送到一個 Web API URI 并處理相應(yīng)的響應(yīng)。常用的方法有：

• GetFromJsonAsync：發(fā)送 HTTP GET 請求，并將 JSON 響應(yīng)正文解析成一個對象。

• PostAsJsonAsync：將 POST 請求發(fā)送到指定的 URI，并在請求正文中載有序列化為 JSON 的?value。

• PutAsJsonAsync：發(fā)送 HTTP PUT 請求，其中包含 JSON 編碼的內(nèi)容。

要理解如何將這些方法與 HttpClient 一起使用，我們需要創(chuàng)建兩個項目。第一個項目是一個 Web API 項目，它向客戶端公開一個 Web API。第二個項目是 Blazor WebAssembly 應(yīng)用程序，它向第一個項目中創(chuàng)建的 Web API 發(fā)送 HTTP 請求。

實現(xiàn)一個 ASP.NET Core Web API

在本節(jié)中，我們將實現(xiàn)一個支持跨域資源共享 (CORS) 的 Web API，以便 Blazor WebAssembly 應(yīng)用程序可以調(diào)用此 API。在 Visual Studio 2019 中創(chuàng)建一個新的 Web API 項目?BlazorClientWebAPI。我們將創(chuàng)建一個簡單的 API 來返回產(chǎn)品列表，所以首先要在項目中創(chuàng)建一個?Models?文件夾，并在其中添加如下的?Product?類。

Product.cs

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

接下來，創(chuàng)建一個?Controllers?文件夾并在其中添加下面的?ProductsController。該控制器簡單地從?GetProducts?方法返回一些模擬的產(chǎn)品數(shù)據(jù)。

ProductsController.cs

[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);} }

現(xiàn)在如果您運行該項目，并嘗試在瀏覽器中使用 URI?api/products?訪問該 API，您應(yīng)該能看到以 JSON 格式返回的產(chǎn)品數(shù)據(jù)。

在 ASP.NET Core Web API 中啟用 CORS

默認情況下，瀏覽器安全性不允許一個網(wǎng)頁向除提供該網(wǎng)頁的域之外的其他域發(fā)送請求。這種約束稱之為同源策略。如果我們希望 Blazor WebAssembly 應(yīng)用程序或其他客戶端應(yīng)用程序使用上述 Web API，那么我們必須啟用跨域資源共享 (CORS)。打開?Startup.cs?文件，并在?ConfigureServices?方法中調(diào)用?AddCors?方法。

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

同時，在?Startup.cs?文件的?Configure?方法中添加以下代碼行。

app.UseCors("CorsPolicy");

有關(guān)使用 ASP.NET Core 應(yīng)用程序的 CORS 的詳細信息，請參閱?《Enable Cross-Origin Requests (CORS) in ASP.NET Core》^[3]。

實現(xiàn) Blazor WebAssembly 應(yīng)用程序

在創(chuàng)建上述 Web API 項目的同一解決方案中添加一個新的 Blazor WebAssembly 應(yīng)用程序項目?BlazorClientWebAPIsDemo。

我們需要確保的第一件事是，在項目文件中有?System.Net.Http.Json?的引用。如果沒有，那么您可以添加該引用。

<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>

接下來，我們需要在?Program.cs?文件中配置 HttpClient 服務(wù)。確保提供了要從 Blazor WebAssembly 應(yīng)用程序調(diào)用的 Web API 的基地址。

Program.cs

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(); }

為了使用產(chǎn)品 API，我們在?Pages?文件夾中創(chuàng)建一個?Products.razor?組件。該視圖非常簡單，因為它只是迭代產(chǎn)品列表并使用簡單的 HTML 表格來顯示它們。

Products.razor

@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> }

創(chuàng)建一個代碼隱藏文件?Products.razor.cs，并將配置的?HttpClient?實例作為私有成員注入到該類中。最后，使用?GetFromJsonAsync?方法調(diào)用產(chǎn)品 API。

Products.razor.cs

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");} }

您還需要在 Blazor WebAssembly 項目中創(chuàng)建一個?Product?類的本地副本，以將產(chǎn)品 API 的結(jié)果反序列化為產(chǎn)品對象列表。

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

運行該項目，您將看到從后端 Web API 加載了產(chǎn)品的頁面。

相關(guān)閱讀：

• Blazor Server 和 WebAssembly 應(yīng)用程序入門指南

• Blazor 組件入門指南

• Blazor 數(shù)據(jù)綁定開發(fā)指南

• Blazor 事件處理開發(fā)指南

• Blazor 組件之間使用 EventCallback 進行通信

• Blazor 路由及導(dǎo)航開發(fā)指南

• Blazor 模板化組件開發(fā)指南

• Blazor Server 應(yīng)用程序中進行 HTTP 請求

• Blazor WebAssembly 應(yīng)用程序中進行 HTTP 請求(本文)

---

相關(guān)鏈接：

https://www.ezzylearning.net/tutorial/making-http-requests-in-blazor-webassembly-apps?Making HTTP Requests in Blazor WebAssembly Apps???

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API?Fetch API???

https://docs.microsoft.com/zh-cn/aspnet/core/security/cors???

作者 ：Waqas Anwar
譯者 ：技術(shù)譯民
出品 ：技術(shù)譯站（https://ITTranslator.cn/）

總結(jié)

以上是生活随笔為你收集整理的Blazor WebAssembly 应用程序中进行 HTTP 请求的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。