BlazorWebAssembly应用程序中进行HTTP请求

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

公司主营业务：成都网站设计、成都做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出婺源免费做网站回馈大家。

在我的前篇文章《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

 
 
 
 
    
  
  
  
  
  1. public class Product 
    2.   
  
  
  
  2. { 
    3.   
  
  
  
  3.     public int Id { get; set; } 
    4.   
  
  
  
  4.     public string Name { get; set; } 
    5.   
  
  
  
  5.     public decimal Price { get; set; } 
    6.   
  
  
  
  6. } 
    7.

接下来，创建一个 Controllers 文件夹并在其中添加下面的 ProductsController。该控制器简单地从 GetProducts 方法返回一些模拟的产品数据。

ProductsController.cs

 
 
 
 
    
  
  
  
  
  1. [Route("api/[controller]")] 
    2.   
  
  
  
  2. [ApiController] 
    3.   
  
  
  
  3. public class ProductsController : ControllerBase 
    4.   
  
  
  
  4. { 
    5.   
  
  
  
  5.     [HttpGet] 
    6.   
  
  
  
  6.     public IActionResult GetProducts() 
    7.   
  
  
  
  7.     { 
    8.   
  
  
  
  8.         var products = new List() 
    9.   
  
  
  
  9.         { 
    10.   
  
  
  
  10.             new Product() 
    11.   
  
  
  
  11.             { 
    12.   
  
  
  
  12.                 Id = 1, 
    13.   
  
  
  
  13.                 Name = "Wireless Mouse", 
    14.   
  
  
  
  14.                 Price = 29.99m 
    15.   
  
  
  
  15.             }, 
    16.   
  
  
  
  16.             new Product() 
    17.   
  
  
  
  17.             { 
    18.   
  
  
  
  18.                 Id = 2, 
    19.   
  
  
  
  19.                 Name = "HP Headphone", 
    20.   
  
  
  
  20.                 Price = 79.99m 
    21.   
  
  
  
  21.             }, 
    22.   
  
  
  
  22.             new Product() 
    23.   
  
  
  
  23.             { 
    24.   
  
  
  
  24.                 Id = 3, 
    25.   
  
  
  
  25.                 Name = "Sony Keyboard", 
    26.   
  
  
  
  26.                 Price = 119.99m 
    27.   
  
  
  
  27.             } 
    28.   
  
  
  
  28.         }; 
    29.   
  
  
  
  29.   
    30.   
  
  
  
  30.         return Ok(products); 
    31.   
  
  
  
  31.     } 
    32.   
  
  
  
  32. } 
    33.

现在如果您运行该项目，并尝试在浏览器中使用 URI api/products 访问该 API，您应该能看到以 JSON 格式返回的产品数据。

在 ASP.NET Core Web API 中启用 CORS

默认情况下，浏览器安全性不允许一个网页向除提供该网页的域之外的其他域发送请求。这种约束称之为同源策略。如果我们希望 Blazor WebAssembly 应用程序或其他客户端应用程序使用上述 Web API，那么我们必须启用跨域资源共享 (CORS)。打开 Startup.cs 文件，并在 ConfigureServices 方法中调用 AddCors 方法。

 
 
 
 
    
  
  
  
  
  1. public void ConfigureServices(IServiceCollection services) 
    2.   
  
  
  
  2. { 
    3.   
  
  
  
  3.     services.AddCors(policy => 
    4.   
  
  
  
  4.     { 
    5.   
  
  
  
  5.         policy.AddPolicy("CorsPolicy", opt => opt 
    6.   
  
  
  
  6.             .AllowAnyOrigin() 
    7.   
  
  
  
  7.             .AllowAnyHeader() 
    8.   
  
  
  
  8.             .AllowAnyMethod()); 
    9.   
  
  
  
  9.     }); 
    10.   
  
  
  
  10.   
    11.   
  
  
  
  11.     services.AddControllers(); 
    12.   
  
  
  
  12. } 
    13.

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

 
 
 
 
    
  
  
  
  
  1. app.UseCors("CorsPolicy"); 
    2.

有关使用 ASP.NET Core 应用程序的 CORS 的详细信息，请参阅 《Enable Cross-Origin Requests (CORS) in ASP.NET Core》[3]。

实现 Blazor WebAssembly 应用程序

在创建上述 Web API 项目的同一解决方案中添加一个新的 Blazor WebAssembly 应用程序项目 BlazorClientWebAPIsDemo。

我们需要确保的第一件事是，在项目文件中有 System.Net.Http.Json 的引用。如果没有，那么您可以添加该引用。

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.     
    3.   
  
  
  
  3.       net5.0 
    4.   
  
  
  
  4.     
    5.   
  
  
  
  5.     
    6.   
  
  
  
  6.        
    7.   
  
  
  
  7.        
    8.   
  
  
  
  8.        
    9.   
  
  
  
  9.     
    10.   
  
  
  
  10.  
    11.

接下来，我们需要在 Program.cs 文件中配置 HttpClient 服务。确保提供了要从 Blazor WebAssembly 应用程序调用的 Web API 的基地址。

Program.cs

 
 
 
 
    
  
  
  
  
  1. public static async Task Main(string[] args) 
    2.   
  
  
  
  2. { 
    3.   
  
  
  
  3.     var builder = WebAssemblyHostBuilder.CreateDefault(args); 
    4.   
  
  
  
  4.     builder.RootComponents.Add("#app"); 
    5.   
  
  
  
  5.   
    6.   
  
  
  
  6.     builder.Services.AddScoped(sp => new HttpClient 
    7.   
  
  
  
  7.     { 
    8.   
  
  
  
  8.         BaseAddress = new Uri("http://localhost:5000/api/") 
    9.   
  
  
  
  9.     });  
    10.   
  
  
  
  10.   
    11.   
  
  
  
  11.     await builder.Build().RunAsync(); 
    12.   
  
  
  
  12. } 
    13.

为了使用产品 API，我们在 Pages 文件夹中创建一个 Products.razor 组件。该视图非常简单，因为它只是迭代产品列表并使用简单的 HTML 表格来显示它们。

Products.razor

 
 
 
 
    
  
  
  
  
  1. @page "/products" 
    2.   
  
  
  
  2.   
    3.   
  
  
  
  3. Products
     
    4.   
  
  
  
  4.   
    5.   
  
  
  
  5. @if (products == null) 
    6.   
  
  
  
  6. { 
    7.   
  
  
  
  7.     
    Loading...
     
    8.   
  
  
  
  8. } 
    9.   
  
  
  
  9. else 
    10.   
  
  
  
  10. { 
    11.   
  
  
  
  11.      
    12.   
  
  
  
  12.          
    13.   
  
  
  
  13.              
    14.   
  
  
  
  14.                 Id 
    15.   
  
  
  
  15.                 Name 
    16.   
  
  
  
  16.                 Price 
    17.   
  
  
  
  17.              
    18.   
  
  
  
  18.          
    19.   
  
  
  
  19.          
    20.   
  
  
  
  20.             @foreach (var forecast in products) 
    21.   
  
  
  
  21.             { 
    22.   
  
  
  
  22.                  
    23.   
  
  
  
  23.                     @forecast.Id 
    24.   
  
  
  
  24.                     @forecast.Name 
    25.   
  
  
  
  25.                     @forecast.Price 
    26.   
  
  
  
  26.                  
    27.   
  
  
  
  27.             } 
    28.   
  
  
  
  28.          
    29.   
  
  
  
  29.      
    30.   
  
  
  
  30. } 
    31.

创建一个代码隐藏文件 Products.razor.cs，并将配置的 HttpClient 实例作为私有成员注入到该类中。最后，使用 GetFromJsonAsync 方法调用产品 API。

Products.razor.cs

 
 
 
 
    
  
  
  
  
  1. public partial class Products 
    2.   
  
  
  
  2. { 
    3.   
  
  
  
  3.     private List products; 
    4.   
  
  
  
  4.   
    5.   
  
  
  
  5.     [Inject] 
    6.   
  
  
  
  6.     private HttpClient Http { get; set; } 
    7.   
  
  
  
  7.   
    8.   
  
  
  
  8.     protected override async Task OnInitializedAsync() 
    9.   
  
  
  
  9.     { 
    10.   
  
  
  
  10.         products = await Http.GetFromJsonAsync>("products"); 
    11.   
  
  
  
  11.     }  
    12.   
  
  
  
  12. } 
    13.

您还需要在 Blazor WebAssembly 项目中创建一个 Product 类的本地副本，以将产品 API 的结果反序列化为产品对象列表。

 
 
 
 
    
  
  
  
  
  1. public class Product 
    2.   
  
  
  
  2. { 
    3.   
  
  
  
  3.     public int Id { get; set; } 
    4.   
  
  
  
  4.     public string Name { get; set; } 
    5.   
  
  
  
  5.     public decimal Price { get; set; } 
    6.   
  
  
  
  6. } 
    7.

运行该项目，您将看到从后端 Web API 加载了产品的页面。

当前名称：BlazorWebAssembly应用程序中进行HTTP请求
文章分享：http://www.csdahua.cn/qtweb/news6/397256.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

网站排名知识

各行业网站

成都微信小程序　　 　四川搅拌罐车　　 　h5页面制作　　 　云虚拟主机　　 　简阳电信服务器托管　　 　成都网站建设报价　　 　营山网站建设　　 　信衡房屋鉴定　　 　传美奇电器　　 　成都定制网站　　 　企业网站设计　　 　成都网络公司　　 　深圳惠宜防蚊纱窗　　 　广东帝美豪门窗　　 　免备案虚拟主机　　 　简阳网站制作　　 　微信网站开发　　 　成都app制作　　 　成都网站建设　　 　成都名片印刷