在上一篇我們學習瞭如何創建和使用Razor類庫，這一篇我們瞭解下WebAssembly是什麼，以及創建第一個Blazor WebAssembly應用。

什麼是WebAssembly？

WebAssembly 是一種開放的文本程序集語言，具有專用於實現快速下載和近乎本機性能的精簡二進制格式，它用於定義旨在 Web 瀏覽器中運行的程序的可移植代碼格式。Blazor 是在 .NET 和 Razor 上構建的用戶界面框架。Blazor 應用程序可以在服務器上作爲 ASP.NET 應用程序的一部分運行，也可以部署爲在用戶計算機上的瀏覽器中運行（類似於單頁應用程序）。在之前的學習之旅中，我們一直使用的 Blazor Server 模式，它會使用 ASP.NET Core SignalR 來維護雙向通信管道。除此之外，Blazor還提供了另一種模式，就是我們今天要學習的 Blazor WebAssembly！

Blazor WebAssembly（有時簡稱爲 Blazor WASM）是 Blazor 用戶界面框架的實現，在所有新式瀏覽器中均包含的 HTML5 標準 WebAssembly 運行時上運行。應用程序的二進制輸出，即 DLL 文件，將傳輸到瀏覽器，並運行經過優化以使用 WebAssembly 運行時的 .NET 版本，無需考慮瀏覽到該網站的設備的基礎操作系統。

話外音：首次應用訪問時下載量比較大，影響性能，這可能是最大的缺點。但它支持離線運行。

由於 WebAssembly 是一種完全在瀏覽器中運行的技術，因此，可以使用 Web 服務器不分析或與其交互的文件來部署 Blazor 應用程序的此模型。這種“靜態”方法降低了對 Web 服務器的要求，並且將應用程序的所有處理都轉移到用戶計算機。

高級處理和邏輯可以在瀏覽器中進行。當應用程序需要數據或與其他服務交互時，可以使用標準 Web 技術與 HTTP 服務通信。

總結下：Blazor WebAssembly 是一種SPA(單頁應用)框架，使用的是 WebAssembly 開放標準，無需安裝任何插件或代碼生成，完全在瀏覽器中運行。

對比下：Blazor WebAssembly 是真正的SPA，頁面的渲染在前端實現，可以實現真正的前後端分離設計。而Blazor Server 可以認爲是前者的服務端渲染版本，它使用SignalR實現了客戶端的實時通訊，它的計算跟渲染都在服務端處理。當然，這兩種類型都不需要你有太多甚至都可以沒有JavaScript的知識就可以完成全棧開發，無論是SPA還是MPA，這是Blazor對於.NET開發者最大的意義！

接下來，我們就來使用Blazor WebAssembly來體驗一下。

創建一個WASM項目

這次，我們在Visual Studio中創建一個“Blazor WebAssembly”類型的應用，並暫且給它取名爲“EDT.BlazorWasm.App”。

選擇".NET 6框架"，“身份驗證類型”設置爲“無”，取消“ASP.NET Core託管”複選框，然後點擊創建。

F5開始運行，瀏覽器會顯示一定時間（大概好幾秒鐘）的Loading，在Blazor WebAssembly首次訪問時需要下載相比Blazor Server更多的文件到瀏覽器。

Loading完成後，就顯示我們的應用內容了：

於是，你的第一個Blazor WebAssembly應用程序就運行好了。

使用HttpClient獲取數據

在創建的Blazor WebAssembly項目中，自帶的模板已經給我們演示了一個 FeatchData.razor頁，它演示的是我們如何在SPA這種前後端分離項目中，前端如何從後端獲取數據，這也是我們日常開發中的重點工作。

首先，在Program.cs中已經幫我們注入一個HttpClient，它指向的是本項目的地址。

var builder = WebAssemblyHostBuilder.CreateDefault(args);
......
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
......

NOTE：在實際開發中，我們會注入真實的後端WebAPI項目的真實地址，而且會使用HttpClientFactory而不是直接使用HttpClient，如下所示：

builder.Services.AddHttpClient(name: "product", c =>
{
    c.BaseAddress = new Uri("https://api-gateway/product/api");
};

其次，在FetchData.razor頁面中，它通過注入HttpClient實例，並且重寫OnIntializedAsync方法來調用HttpClient的GetFromJsonAsync方法完成從後端的數據獲取。

@page "/fetchdata"
@inject HttpClient Http

......

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string? Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

需要注意的是，在這個模板示例中，它並沒有真正的調用API，而只是通過HttpClient從該項目的服務器端目錄下直接獲取了一個json數據文件內容。這個weather.json文件位於wwwroot/sample-data目錄下。

NOTE：在實際開發中，我們通常注入HttpClientFactory實例，然後通過HttpClientFactory來創建HttpClient實例。

@inject IHttpClientFactory HttpClientFactory
......
@code {
    ......
    protected override async Task OnInitializedAsync()
    {
        var httpClient = HttpClientFactory.CreateClient(name: "product");  
        forecasts = await httpClient.GetFromJsonAsync<IList<Product>>("v1/product");
    }
    ......
}