日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時間:2023/12/4 编程问答 66 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Blazor WebAssembly 应用程序中进行 HTTP 请求 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

在我的前篇文章《Blazor Server 應(yīng)用程序中進行 HTTP 請求》中,我介紹了在 Blazor Server 應(yīng)用程序中進行 HTTP 請求的相關(guān)技術(shù),在 Blazor Server App 中您可以訪問所有的 .NET 類庫和組件。但如果您創(chuàng)建的是 Blazor WebAssembly 應(yīng)用程序,那么您的代碼將在客戶端的瀏覽器沙箱中運行,您的選擇在某種程度上會受到限制。在本教程中,我將向您展示如何在 Blazor WebAssembly 應(yīng)用程序進行 HTTP 請求。

Blazor WebAssembly 應(yīng)用程序中的 HttpClient 概述

Blazor WebAssembly 應(yīng)用程序使用預(yù)置的 HttpClient 服務(wù)調(diào)用 Web API。這個預(yù)置的 HttpClient 是使用瀏覽器的 Fetch API[2]?實現(xiàn)的,會有一些限制。HttpClient 還可以使用 Blazor JSON 幫助程序或 HttpRequestMessage 對象進行 API 調(diào)用。默認情況下,您只能向同源服務(wù)器發(fā)送 API 調(diào)用請求,不過如果第三方 API 支持跨域資源共享(CORS)的話,您也可以調(diào)用其他服務(wù)器上的 API。

命名空間 System.Net.Http.Json 為使用 System.Text.Json 執(zhí)行自動序列化和反序列化的 HttpClient 提供了擴展方法。這些擴展方法將請求發(fā)送到一個 Web API URI 并處理相應(yīng)的響應(yīng)。常用的方法有:

  • GetFromJsonAsync:發(fā)送 HTTP GET 請求,并將 JSON 響應(yīng)正文解析成一個對象。

  • PostAsJsonAsync:將 POST 請求發(fā)送到指定的 URI,并在請求正文中載有序列化為 JSON 的?value。

  • PutAsJsonAsync:發(fā)送 HTTP PUT 請求,其中包含 JSON 編碼的內(nèi)容。

要理解如何將這些方法與 HttpClient 一起使用,我們需要創(chuàng)建兩個項目。第一個項目是一個 Web API 項目,它向客戶端公開一個 Web API。第二個項目是 Blazor WebAssembly 應(yīng)用程序,它向第一個項目中創(chuàng)建的 Web API 發(fā)送 HTTP 請求。

實現(xiàn)一個 ASP.NET Core Web API

在本節(jié)中,我們將實現(xiàn)一個支持跨域資源共享 (CORS) 的 Web API,以便 Blazor WebAssembly 應(yīng)用程序可以調(diào)用此 API。在 Visual Studio 2019 中創(chuàng)建一個新的 Web API 項目?BlazorClientWebAPI。我們將創(chuàng)建一個簡單的 API 來返回產(chǎn)品列表,所以首先要在項目中創(chuàng)建一個?Models?文件夾,并在其中添加如下的?Product?類。

Product.cs

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

接下來,創(chuàng)建一個?Controllers?文件夾并在其中添加下面的?ProductsController。該控制器簡單地從?GetProducts?方法返回一些模擬的產(chǎn)品數(shù)據(jù)。

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

現(xiàn)在如果您運行該項目,并嘗試在瀏覽器中使用 URI?api/products?訪問該 API,您應(yīng)該能看到以 JSON 格式返回的產(chǎn)品數(shù)據(jù)。

在 ASP.NET Core Web API 中啟用 CORS

默認情況下,瀏覽器安全性不允許一個網(wǎng)頁向除提供該網(wǎng)頁的域之外的其他域發(fā)送請求。這種約束稱之為同源策略。如果我們希望 Blazor WebAssembly 應(yīng)用程序或其他客戶端應(yīng)用程序使用上述 Web API,那么我們必須啟用跨域資源共享 (CORS)。打開?Startup.cs?文件,并在?ConfigureServices?方法中調(diào)用?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");

有關(guān)使用 ASP.NET Core 應(yīng)用程序的 CORS 的詳細信息,請參閱?《Enable Cross-Origin Requests (CORS) in ASP.NET Core》[3]

實現(xiàn) Blazor WebAssembly 應(yīng)用程序

在創(chuàng)建上述 Web API 項目的同一解決方案中添加一個新的 Blazor WebAssembly 應(yīng)用程序項目?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 服務(wù)。確保提供了要從 Blazor WebAssembly 應(yīng)用程序調(diào)用的 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(); }

為了使用產(chǎn)品 API,我們在?Pages?文件夾中創(chuàng)建一個?Products.razor?組件。該視圖非常簡單,因為它只是迭代產(chǎn)品列表并使用簡單的 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> }

創(chuàng)建一個代碼隱藏文件?Products.razor.cs,并將配置的?HttpClient?實例作為私有成員注入到該類中。最后,使用?GetFromJsonAsync?方法調(diào)用產(chǎn)品 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 項目中創(chuàng)建一個?Product?類的本地副本,以將產(chǎn)品 API 的結(jié)果反序列化為產(chǎn)品對象列表。

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

運行該項目,您將看到從后端 Web API 加載了產(chǎn)品的頁面。

相關(guān)閱讀:

  • Blazor Server 和 WebAssembly 應(yīng)用程序入門指南

  • Blazor 組件入門指南

  • Blazor 數(shù)據(jù)綁定開發(fā)指南

  • Blazor 事件處理開發(fā)指南

  • Blazor 組件之間使用 EventCallback 進行通信

  • Blazor 路由及導(dǎo)航開發(fā)指南

  • Blazor 模板化組件開發(fā)指南

  • Blazor Server 應(yīng)用程序中進行 HTTP 請求

  • Blazor WebAssembly 應(yīng)用程序中進行 HTTP 請求(本文)


相關(guān)鏈接:

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

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

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

  • 作者 :Waqas Anwar
    譯者 :技術(shù)譯民
    出品 :技術(shù)譯站(https://ITTranslator.cn/)

    總結(jié)

    以上是生活随笔為你收集整理的Blazor WebAssembly 应用程序中进行 HTTP 请求的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網(wǎng)站內(nèi)容還不錯,歡迎將生活随笔推薦給好友。