翻译自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"

产品

正在加载...