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