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

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

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

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

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

在 ASP.NET Core Web API 中启用 CORS

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

有关使用 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 的引用。如果没有,那么您可以添加该引用。

<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 服务。确保提供了要从 Blazor WebAssembly 应用程序调用的 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();
}

为了使用产品 API,我们在 Pages 文件夹中创建一个 Products.razor 组件。该视图非常简单,因为它只是迭代产品列表并使用简单的 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>
}

创建一个代码隐藏文件 Products.razor.cs,并将配置的 HttpClient 实例作为私有成员注入到该类中。最后,使用 GetFromJsonAsync 方法调用产品 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 项目中创建一个 Product 类的本地副本,以将产品 API 的结果反序列化为产品对象列表。

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

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

相关阅读:

作者 : Waqas Anwar

翻译 : 技术译站

链接 : 英文原文


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

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

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

Blazor WebAssembly 应用程序中进行 HTTP 请求的更多相关文章

  1. Blazor Server 应用程序中进行 HTTP 请求

    翻译自 Waqas Anwar 2021年5月4日的文章 <Making HTTP Requests in Blazor Server Apps> [1] Blazor Server 应用 ...

  2. java 之程序中的http请求

    背景 java程序中有时需要我们发起http级别的请求,例如抓数据或者第三方对接时,一般分为两种:一种是只需我们发起请求,还有一种是我们不但要发起请求,还要拿到请求后的数据来进行下一步处理 实现 针对 ...

  3. 使用Fiddler捕获Java程序中的HTTP请求

      默认Java程序是不支持Fiddler获取请求的,因此需要通过设置代理来实现.   Fiddler的端口是8888,若Fiddler没有运行,则会抛出异常.   HttpClient4.5示例: ...

  4. 小程序中的数据请求sessionid,保持登陆状态。

    版权声明:本文为CSDN博主「weixin_43964779」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net ...

  5. Blazor Server 和 WebAssembly 应用程序入门指南

    翻译自 Waqas Anwar 2021年3月12日的文章 <A Beginner's Guide To Blazor Server and WebAssembly Applications&g ...

  6. Blazor WebAssembly 3.2.0 Preview 4 如期发布

    ASP.NET团队如期3.16在官方博客发布了 Blazor WebAssembly 3.2.0 Preview 4:https://devblogs.microsoft.com/aspnet/bla ...

  7. 通过 Serverless 加速 Blazor WebAssembly

    Blazor ❤ Serverless 我正在开发 Ant Design 的 Blazor 版本,预览页面部署在 Github Pages 上,但是加载速度很不理想,往往需要 1 分钟多钟才完成. 项 ...

  8. Blazor WebAssembly 3.2 正式发布

    5月 20日,微软 发布了 Blazor WebAssembly 3.2(https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0- ...

  9. 「译」用 Blazor WebAssembly 实现微前端

    原文作者: Wael Kdouh 原文链接:https://medium.com/@waelkdouh/microfrontends-with-blazor-webassembly-b25e4ba3f ...

随机推荐

  1. Leetcode春季打卡第四天:994. 腐烂的橘子

    Leetcode春季打卡第四天:994. 腐烂的橘子 Leetcode春季打卡第四天:994. 腐烂的橘子 思路 思路是采用广度优先搜索,一层一层遍历. 首先先扫描矩阵,将坏橘子放进队列,记录正常橘子 ...

  2. 秒懂 Java 的三种代理模式

    前言 代理(Proxy)模式是一种结构型设计模式,提供了对目标对象另外的访问方式:即通过代理对象访问目标对象. 这样做的好处是:可以在目标对象实现的基础上,增强额外的功能操作,即扩展目标对象的功能. ...

  3. java 日期字符串互相转换

    一.把日期转换成字符串 //获取当前时间  Date date = new Date();   //打印date数据类型  System.out.println(date.getClass().get ...

  4. 深入刨析tomcat 之---第11篇 how tomcat works( 第15章 ) 如何解析web.xml 文件

    writedby 张艳涛 记得当年是学习jsp的时候,写过web.xml中的标签.在之后的springmvc中也是有关于配置mvc 过滤器 和dispatchServlet的标签,之前是看不懂呢!看到 ...

  5. SourceTree 3.1.3版本跳过注册

    1.进入文件夹 %LocalAppData%\Atlassian\SourceTree\ 找到SourceTree的目录 2.里面添加一个json文件 accounts.json 内容如下: [{&q ...

  6. HashSet 的实现原理

    HashSet 概述 对于 HashSet 而言,它是基于 HashMap 实现的,底层采用 HashMap 来保存元素,所以如果对 HashMap 比较熟悉了,那么学习 HashSet 也是很轻松的 ...

  7. 误改win10下的windowsapps文件夹权限,导致自带应用闪退问题

    在项目中,为了获得相关应用的具体位置(office的具体exe位置),修改了文件夹WindowsApps权限,导致所有自带应用打开闪退. 通过搜索相关资料,获得解决方法: 重置该文件的权限设置 ica ...

  8. PHP:字符串转数组,数组转字符串;字符串截取、替换、查找

    字符串转数组$str = 'one|two|three|four'; print_r(explode('|', $str)); //explode 以字符串分割字符串到数组 $str = 'one t ...

  9. 论文笔记:(NIPS2018)PointCNN: Convolution On X-Transformed Points

    目录 摘要 一.2D卷积应用在点云上存在的问题 二.解决的方法 2.1 idea 2.2 X-conv算子 2.3 分层卷积 三.实验 3.1分类和分割 3.2消融实验.可视化和模型复杂度 总结 仍存 ...

  10. fiddle手机抓包配置

    第一步:打开Fiddler,配置参数: 1. 配置fiddler允许监听到https 打开Fiddler菜单项Tools->TelerikFiddler Options->HTTPS, 勾 ...