Blazor WebAssembly 应用程序中进行 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

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 加载了产品的页面。

相关阅读:

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

  • Blazor 组件入门指南

  • Blazor 数据绑定开发指南

  • Blazor 事件处理开发指南

  • Blazor 组件之间使用 EventCallback 进行通信

  • Blazor 路由及导航开发指南

  • Blazor 模板化组件开发指南

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

  • Blazor WebAssembly 应用程序中进行 HTTP 请求(本文)


相关链接:

  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 ↩︎

作者 :Waqas Anwar
译者 :技术译民
出品 :技术译站(https://ITTranslator.cn/)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/298869.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI如果耍起了心眼,人类就像个白痴......

耍小心眼已经不是人类专利了。之前&#xff0c;有一群研究者整理了一个场景的List&#xff0c;细数了AI为了完成任务&#xff0c;而耍的小心眼&#xff0c;或者说作弊。例如&#xff0c;在让AI玩俄罗斯方块的时候&#xff0c;发现最佳完成任务的方式是直接暂停游戏&#xff1b;…

ASP.NET MVC数据验证(上)

关于ASP.NET MVC的验证&#xff0c;用起来很特别&#xff0c;因为MS的封装&#xff0c;使人理解起来很费解。也可能很多人都在Scott Guthrie等人写的一本《ASP.NET MVC 1.0》书中&#xff0c;见过NerdDinner项目中对Dinner对象修改和添加的时的数据验证。但有许多封装的地方&am…

Android 的基本组件之一 Gallery

声明&#xff1a;本人博客纯属个人学习过程中的一些仿写的简单练习记录&#xff0c;其他论坛也有类似内容&#xff01;&#xff08;可能不免有错误之处&#xff0c;还望见谅&#xff0c;指出&#xff09;这是一个最简单可以滑动查看图片的应用程序&#xff1a;首先创建项目名为…

【设计模式】—— 中介者模式Mediator

前言&#xff1a;【模式总览】——————————by xingoo 模式意图 使用一个中介的对象&#xff0c;封装一组对象之间的交互&#xff0c;这样这些对象就可以不用彼此耦合。 这个中介者常常起着中间桥梁的作用&#xff0c;使其他的对象可以利用中介者完成某些行为活动&#…

contos6.5卸载php7,centos8 测地卸载php5.6 与卸载php7

centos8 yum php 默认安装 php7.1.2我想卸载php7 &#xff0c;安装php5.6yum remove php 无法彻底卸载干净。必须强制删除&#xff0c;使用下面命令查看全部php软件包rpm -qa|grep php&#xff0c;然后安装指定顺序卸载卸载php7.X[rootxxx php-memcached]# rpm -qa | grep phpp…

【招聘(上海)】美团酒店招聘 .NET 高级开发

美团酒店介绍&#xff1a;美团酒店是美团旗下的综合住宿服务平台&#xff0c;始终秉承“帮大家住得更好”的使命。成立以来&#xff0c;屡次刷新中国在线住宿行业新纪录。目前&#xff0c;美团已覆盖超过40万家国内酒店&#xff0c;以及全球200多个国家的50000多个城市。我们求…

mysql数据库主要用来做什么的_水晶头骨用来做什么的?

1927年一个小女孩在挖掘时&#xff0c;发现了一颗人头骨。这颗头骨是用水晶做成的&#xff0c;之后关于水晶头骨之谜一直被人津津乐道&#xff0c;人们一直在猜测水晶头骨用来做什么的&#xff1f;一共有多少个&#xff1f;在小女孩挖到这颗头骨之前&#xff0c;大英博物馆里就…

日本画风超级“诡异”毕业典礼上线,网友:有被吓到,谢谢!

转眼间又到了日本毕业季&#xff0c;四月份本来是日本毕业季。在日本&#xff0c;毕业季是非常仪式感的存在&#xff1a;学校里会满是穿着浴衣、盛装打扮的小哥哥小姐姐&#xff0c;拿着毕业证书&#xff0c;在樱花树下合照。图片来源&#xff1a;日剧《对不起&#xff0c;青春…

文本文件的读写

// 读文件 public TextWriter w; // 写文件 public TextReader r; // 读文本文件 private void button1_Click(object sender, System.EventArgs e) { if(openFileDialog1.ShowDialog() DialogResult.OK) { textBox1.Text openFileDialog1.FileName; r new StreamReader(ope…

博客编辑工具ckeditor

在asp网站开发过程当中常常用到漂亮的编辑工具。 在这个网站有不少&#xff1a;http://ckeditor.com/ 而且下载下来就可以使用&#xff0c;是开源的。它不像asp里面的.dll控件拖进来就可以使用&#xff0c;而是通过调用的方式使用。 下载下来解压之后就可以直接包含在项目中&am…

java单链表查询功能,Java 实现简答的单链表的功能

作者&#xff1a;林子木 博客网址&#xff1a;http://blog.csdn.net/wolinxuebin參考网址&#xff1a;http://blog.csdn.net/sunsaigang/article/details/5751780描写叙述&#xff1a;使用java实现简答的单链表的功能定义了一个MyList类包括的函数&#xff1a;getHead()返回头…

记一次 .NET 某流媒体独角兽 API 句柄泄漏分析

一&#xff1a;背景 1. 讲故事上上周有位朋友找到我&#xff0c;说他的程序CPU和句柄都在不断的增长&#xff0c;无回头趋势&#xff0c;查了好些天也没什么进展&#xff0c;特加wx寻求帮助&#xff0c;截图如下&#xff1a;看的出来这位朋友也是非常郁闷&#xff0c;出问题还出…

iphone最新款手机_苹果罕见“跌停”!遭遇6年来最惨淡一夜,2019年全球股市第一颗雷引爆...

2019年全球股市的第一颗大雷引爆了。受苹果下调营收预期影响&#xff0c;周四盘中&#xff0c;苹果股价一度跌至142.08美元&#xff0c;创逾一年半新低&#xff0c;日内跌幅超过10%&#xff0c;市值缩水750亿美元。最终&#xff0c;苹果收跌9.96%&#xff0c;创出自2013年1月以…

MVC学习之分页 【转】

分页如果dinners列表记录过多&#xff0c;为了让用户更方便浏览&#xff0c;我们需要实现分页显示&#xff0c;而不是一次显示大量的记录列表。Index() Action方法更新DinnersController类的Index() action方法代码如下&#xff1a;//// GET: /Dinners/public ActionResult Ind…

构件图

构件图 目录 构件图概要... 1 构件图中的事物及解释... 1 构件图中的关系及解释... 1 我的构件图... 1 构件图用于静态建模&#xff0c;是表示构件类型的组织以及各种构件之间依赖关系的图。构件图通过对构件间依赖关系的描述来估计对系统构件的修改给系统可能带来的影响…

不小心把硬盘摔了一下,结果电脑变成这样了......

1 会主动要求换尿裤的小宇航员▼2 其实赚钱这个事儿我也不太会▼3 春困、夏倦、秋乏、冬眠一年四季都好适合睡觉啊&#xff01;▼4 这是硬盘摔了&#xff0c;结果把显示器心疼坏了吧&#xff1f;▼5 柯基&#xff1a;弱小、可怜▼6 朋友相册里的你▼7 人类迷惑行为之放生…

java实现数字转mac,Java Ethernet.getSourceMAC方法代码示例

import org.onlab.packet.Ethernet; //导入方法依赖的package包/类/*** Process an incoming PIM Hello message. There are a few things going on in* this method:* * We may have to create a new neighbor if one does not already exist* We may need to re-elect a new …

win10前置耳机插孔没声音_音频服务未运行怎么办?win7和win10电脑没声音了恢复方法...

很多人可能都会问电脑没声音了&#xff0c;如何恢复&#xff1f;其实造成这种情况的原因有很多&#xff0c;一般需要一个一个排查。这次&#xff0c;小编跟大家分享其中的一个原因&#xff0c;以及具体的解决方法。个别小伙伴的笔记本电脑&#xff0c;每次开机总会提示音频服务…

开源 java CMS - FreeCMS2.2 系统配置

2019独角兽企业重金招聘Python工程师标准>>> 项目地址&#xff1a;http://www.freeteam.cn/ 系统配置 管理系统使用的配置项。 从左侧管理菜单点击系统配置进入。 从FreeCMS 1.7开始支持 数据变更后栏目页面静态化间隔时间(单位为分)&#xff1a;修改栏目、更新…

EF Core使用Simple Logging输出日志

在使用EF Core的时候&#xff0c;很多时候需要知道EF Core实际执行的SQL语句是什么。Simple Logging是EF Core提供的一项功能&#xff0c;可用于在开发和调试应用程序时轻松获取日志。这种形式的日志记录需要最少的配置&#xff0c;而不需要其他NuGet包。功能一瞥配置起来非常简…