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

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

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

Blazor Server 应用使用标准的 ASP.NET Core 应用程序，在服务端执行 .NET 代码。在 Blazor Server 应用程序中，我们可以像在 ASP.NET Core Web 应用程序中那样，使用相同的方式访问任意 .NET 库或服务端功能。这其中的一项功能是，使用 HTTP Client 实例向第三方 Web API 发送 HTTP 请求。在本教程中，我将向您展示创建 HTTP Client 实例的不同方法。另外，我还会向您展示如何在 Blazor Server 应用程序中使用第三方 API 来获取和显示数据。

下载源码[2]

一、第三方 Web API 概览

我们将开发一个 Blazor Server 应用程序，该应用允许用户在 Blazor 页面组件上输入国家代码和年份，然后我们将调用第三方 API 以获取指定国家和年份的公共假期列表。我们使用的第三方 API 是Nager.Date[3]，它是一个全球公共假期 API。

这是一个非常简单的 API，您可以轻松地在 Postman 中输入以下 URL 测试此 API。

https://date.nager.at/api/v2/PublicHolidays/2021/CN

该 API 的响应是 JSON 格式的公共假期列表，如下所示：

二、从 Blazor Sever 应用程序开始

在 Visual Studio 2019 中创建一个 Blazor Server 应用程序，并新建一个名为 Models 的文件夹。在 Models 文件夹中添加以下两个模型类，以映射上述 Holidays API 的请求和响应。

HolidayRequestModel.cs

 public class HolidayRequestModel { public string CountryCode { get; set; } public int Year { get; set; } }

HolidayResponseModel.cs

 public class HolidayResponseModel { public string Name { get; set; } public string LocalName { get; set; } public DateTime? Date { get; set; } public string CountryCode { get; set; } public bool Global { get; set; } }

接下来，在 Pages 文件夹中创建一个新的 Razor 组件 HolidaysExplorer.razor 和代码隐藏文件 HolidaysExplorer.razor.cs。如果您想了解有关 Razor 组件和代码隐藏文件的更多知识，可以阅读文章《Blazor 组件入门指南》。

HolidaysExplorer.razor.cs

 public partial class HolidaysExplorer { private HolidayRequestModel HolidaysModel = new HolidayRequestModel(); private List Holidays = new List(); [Inject] protected IHolidaysApiService HolidaysApiService { get; set; } private async Task HandleValidSubmit() { Holidays = await HolidaysApiService.GetHolidays(HolidaysModel); } }

HolidaysModel 字段是 HolidayRequestModel 类的一个实例，它将帮助我们创建一个简单的表单来向用户询问国家代码和年份。下面的代码片段显示了使用 HolidaysModel 对象创建的 Blazor 表单，其中 HandleValidSubmit 方法是使用 Blazor Form 的 OnValidSubmit 事件配置的，用户提交表单时该方法将被调用。

Country Code:Year:Submit

Holidays 列表用来显示从第三方 API 返回的假期。我们需要使用一个 @foreach 循环迭代返回的假期来生成一个简单的 bootstrap 表格。

 @if (Holidays.Count > 0) {  @foreach (var item in Holidays) {  } 
Date
Name
Local Name
Country Code
Global
@item.Date.Value.ToShortDateString()
@item.Name
@item.LocalName
@item.CountryCode
@item.Global
 }

HolidaysExplorer.razor 视图的完整代码如下：

 @page "/" 
Holidays Explorer

Country Code:Year:Submit
 @if (Holidays.Count > 0) {  @foreach (var item in Holidays) {  } 
Date
Name
Local Name
Country Code
Global
@item.Date.Value.ToShortDateString()
@item.Name
@item.LocalName
@item.CountryCode
@item.Global
 }

此时如果您运行该应用程序，您将看到一个不显示任何假期的简单 HTML 表单。这是因为方法 HandleValidSubmit 是空的，我们还未调用任何 API 来获取假期数据。

三、在 Blazor Server 应用程序中使用 IHttpClientFactory 创建 HttpClient

在 Blazor Server 应用程序中使用 HttpClient 请求第三方 API 有多种不同的方式，让我们从一个基础的示例开始，在该示例中我们使用 IHttpClientFactory 创建 HttpClient 对象。

在项目中创建一个 Services 文件夹，并创建如下的 IHolidaysApiService 接口。该接口只有一个方法 GetHolidays，它以 HolidayRequestModel 作为参数并返回 HolidayResponseModel 对象的列表。

IHolidaysApiService.cs

 public interface IHolidaysApiService { Task> GetHolidays(HolidayRequestModel holidaysRequest); }

接下来，在 Services 文件夹中创建一个 HolidaysApiService 类，实现上面的接口。

 public class HolidaysApiService : IHolidaysApiService { private readonly IHttpClientFactory _clientFactory; public HolidaysApiService(IHttpClientFactory clientFactory) { _clientFactory = clientFactory; } public async Task> GetHolidays(HolidayRequestModel holidaysRequest) { var result = new List(); var url = string.Format("https://date.nager.at/api/v2/PublicHolidays/{0}/{1}", holidaysRequest.Year, holidaysRequest.CountryCode); var request = new HttpRequestMessage(HttpMethod.Get, url); request.Headers.Add("Accept", "application/vnd.github.v3+json"); var client = _clientFactory.CreateClient(); var response = await client.SendAsync(request); if (response.IsSuccessStatusCode) { var stringResponse = await response.Content.ReadAsStringAsync(); result = JsonSerializer.Deserialize>(stringResponse, new JsonSerializerOptions() { PropertyNamingPolicy = JsonNamingPolicy.CamelCase }); } else { result = Array.Empty().ToList(); } return result; } }

在上面的 GetHolidays 方法中，我们首先为第三方 API 创建了一个 URL，并将国家代码和年份参数添加到 URL 中。

var url = string.Format("https://date.nager.at/api/v2/PublicHolidays/{0}/{1}", holidaysRequest.Year, holidaysRequest.CountryCode);

接下来，我们创建了 HttpRequestMessage 对象并配置它以向第三方 API URL 发送 HTTP GET 请求。

var request = new HttpRequestMessage(HttpMethod.Get, url);
request.Headers.Add("Accept", "application/vnd.github.v3+json");

可以使用依赖注入 (DI) 请求一个 IHttpClientFactory，这正是我们将其注入到前面类的构造函数的原因。下面这行代码使用 IHttpClientFactory 创建了一个 HttpClient 实例。

var client = _clientFactory.CreateClient();

有了 HttpClient 对象之后，我们简单地调用它的 SendAsync 方法来发送一个 HTTP GET 请求。

var response = await client.SendAsync(request);

如果 API 调用成功，我们使用下面这行代码将其响应读取为字符串。

var stringResponse = await response.Content.ReadAsStringAsync();

最后，我们使用 JsonSerializer 类的 Deserialize 方法反序列化该响应。

result = JsonSerializer.Deserialize>(stringResponse,
   new JsonSerializerOptions() { PropertyNamingPolicy = JsonNamingPolicy.CamelCase });

在测试该应用程序之前，我们需要在 Startup.cs 文件中注册 HolidaysApiService 服务。我们还需要调用 AddHttpClient 方法注册 IHttpClientFactory。

Startup.cs

 public void ConfigureServices(IServiceCollection services) { services.AddRazorPages(); services.AddServerSideBlazor(); services.AddSingleton(); services.AddHttpClient(); }

运行应用程序并在文本框中提供任意国家代码和年份。点击 Submit 按钮就会在后台调用我们的 GetHolidays 方法，然后您应该能看到如下所示的公共假期列表。

四、在 Blazor Server 应用程序中创建命名 HttpClient 对象

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！