当前位置: 首页 > 科技观察

MakingHTTPRequestsinBlazorWebAssemblyApplications

时间:2023-03-12 08:30:34 科技观察

翻译自WaqasAnwar2021年5月13日的文章《Making HTTP Requests in Blazor WebAssembly Apps》[1]在我之前的文章《Blazor Server 应用程序中进行 HTTP 请求》中介绍了在BlazorServer应用程序中进行HTTP请求对于HTTP请求相关的技术,你可以访问BlazorServerApp中的所有.NET类库和组件。但是,如果您正在创建BlazorWebAssembly应用程序,您的代码将在客户端的浏览器沙箱中运行,您的选择将受到一定程度的限制。在本教程中,我将向您展示如何在BlazorWebAssembly应用程序中发出HTTP请求。BlazorWebAssembly应用程序中的HttpClient概述BlazorWebAssembly应用程序使用预构建的HttpClient服务来调用WebAPI。这个预设的HttpClient是使用浏览器的FetchAPI[2]实现的,有一定的局限性。HttpClient还可以使用BlazorJSON帮助程序或HttpRequestMessage对象进行API调用。默认情况下,您只能向同源服务器发送API调用请求,但如果第三方API支持跨域资源共享(CORS),您也可以调用其他服务器的API。命名空间System.Net.Http.Json为HttpClient提供扩展方法,使用System.Text.Json执行自动序列化和反序列化。这些扩展方法将请求发送到WebAPIURI并处理相应的响应。常用的方法有:GetFromJsonAsync:发送HTTPGET请求,将JSON响应文本解析为对象。PostAsJsonAsync:向指定的URI发送POST请求,并在请求文本中将值序列化为JSON。PutAsJsonAsync:发送带有JSON编码内容的HTTPPUT请求。要了解如何将这些方法与HttpClient一起使用,我们需要创建两个项目。第一个项目是向客户端公开WebAPI的WebAPI项目。第二个项目是一个BlazorWebAssembly应用程序,它向第一个项目中创建的WebAPI发送HTTP请求。实现ASP.NETCoreWebAPI在本节中,我们将实现支持跨源资源共享(CORS)的WebAPI,以便BlazorWebAssembly应用程序可以调用此API。在VisualStudio2019中创建一个新的WebAPI项目BlazorClientWebAPI。我们将创建一个简单的API来返回产品列表,因此首先在项目中创建一个Models文件夹并在其中添加以下Product类。Product.cspublicclassProduct{publicintId{get;set;}publicstringName{get;set;}publicdecimalPrice{get;set;}}接下来,创建一个Controllers文件夹并在其中添加以下ProductsController。控制器只是从GetProducts方法返回一些模拟产品数据。ProductsController.cs[Route("api/[controller]")][ApiController]publicclassProductsController:ControllerBase{[HttpGet]publicIActionResultGetProducts(){varproducts=newList(){newProduct(){Id=1,Name="WirelessMouse",Price=29.99m},newProduct(){Id=2,Name="HPHeadphone",Price=79.99m},newProduct(){Id=3,Name="SonyKeyboard",Price=119.99m}};returnOk(products);}}现在,如果您运行项目并尝试使用URIapi/products在浏览器中访问API,您应该会看到以JSON格式返回的产品数据。在ASP.NETCoreWebAPI中启用CORS默认情况下,浏览器安全性不允许网页将请求发送到提供该网页的域以外的域。此约束称为同源策略。如果我们希望我们的BlazorWebAssembly应用程序或其他客户端应用程序使用上述WebAPI,那么我们必须启用跨源资源共享(CORS)。打开Startup.cs文件,在ConfigureServices方法中调用AddCors方法。publicvoidConfigureServices(IServiceCollectionservices){services.AddCors(policy=>{policy.AddPolicy("CorsPolicy",opt=>opt.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());});services.AddControllers();}同时,在Startup.cs文件的Configure方法中添加以下代码行。app.UseCors("CorsPolicy");有关在ASP.NETCore应用程序中使用CORS的详细信息,请参阅《Enable Cross-Origin Requests (CORS) in ASP.NET Core》[3]。实施BlazorWebAssembly应用程序在创建上述WebAPI项目的同一解决方案中添加一个新的BlazorWebAssembly应用程序项目BlazorClientWebAPIsDemo。我们需要确保的第一件事是项目文件中有对System.Net.Http.Json的引用。如果没有,那么您可以添加该参考。net5.0接下来我们需要在Program.cs文件中配置HttpClient服务。确保提供要从BlazorWebAssembly应用程序调用的WebAPI的基址。Program.cspublicstaticasyncTaskMain(string[]args){varbuilder=WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add("#app");builder.Services.AddScoped(sp=>newHttpClient{BaseAddress=newUri("http://localhost:5000/api/")});awaitbuilder.Build().RunAsync();}为了使用ProductsAPI,我们在Pages文件夹中创建了一个Products.razor组件。该视图非常简单,因为它只是迭代产品列表并使用简单的HTML表格显示它们。Products.razor@page"/products"

产品

@if(products==null){

正在加载...

}else{Id名称价格@foreach(varforecastinproducts){@forecast.Id@forecast.Name@forecast.Price}创建代码隐藏文件Products.razor.cs并将配置的HttpClient实例作为私有成员注入到类中。最后,使用GetFromJsonAsync方法调用产品API。Products.razor.cspublicpartialclassProducts{privateListproducts;[Inject]privateHttpClientHttp{get;set;}protectedoverrideasyncTaskOnInitializedAsync(){products=awaitHttp.GetFromJsonAsync>("产品");在WebAssembly项目中创建Product类的本地副本,以将ProductsAPI的结果反序列化为Product对象列表。publicclassProduct{publicintId{get;set;}publicstringName{get;set;}publicdecimalPrice{get;set;}}运行该项目,您将看到包含从后端WebAPI加载的产品的页面。