Blazor Server中异步JavaScript函数返回值获取指南

在blazor server应用中，我们经常需要调用javascript函数来执行客户端操作，例如与浏览器api交互或使用第三方js库。jsruntime.invokeasync<t>是实现这一目标的关键api。然而，当javascript函数是异步的且返回的数据类型不是简单的字符串时，可能会遇到一些挑战。本文将深入探讨如何处理blazor server与异步javascript函数之间的复杂数据类型传递。

理解异步JavaScript返回值的问题

考虑以下Blazor代码，它尝试调用一个名为getIPadr的JavaScript函数并期望返回一个字符串：

// .razor 文件
private async Task GetJSRemoteIP()
{
    string remoteIP = await JSRuntime.InvokeAsync<string>("getIPadr");
    // 此时 remoteIP 的值可能不是预期的
}

当JavaScript函数是一个同步函数并直接返回一个字符串时，上述Blazor代码能够正常工作：

// .js 文件 (同步示例)
function getIPadr() {
    return "works!";
}

然而，如果JavaScript函数是一个异步函数，并且返回一个JSON对象，例如通过fetch API获取数据：

// .js 文件 (异步JSON返回示例)
async function getIPadr() {
    const response = await fetch("https://api.ipify.org?format=json");
    const jsonData = await response.json(); // jsonData 是一个 JSON 对象，例如 { ip: "192.168.1.1" }
    return jsonData; // 这里返回的是一个 JSON 对象
}

在这种情况下，JSRuntime.InvokeAsync<string>("getIPadr")将无法正确获取到预期的字符串值。核心问题在于，JavaScript函数返回的是一个JSON对象，而Blazor的InvokeAsync<string>期望接收一个字符串。JavaScript运行时通常不会自动将一个JSON对象隐式转换为一个字符串以满足Blazor的类型要求。

立即学习“Java免费学习笔记（深入）”；

解决方案一：直接返回目标字符串属性

如果JavaScript函数返回的JSON对象中，我们只需要其中一个属性的字符串值，那么最直接的解决方案是在JavaScript端直接访问并返回该属性。这样，Blazor仍然可以期望接收一个字符串。

JavaScript代码示例：

假设jsonData对象包含一个名为ip的属性，我们只需要这个IP地址字符串。

// .js 文件
async function getIPadr() {
    const response = await fetch("https://api.ipify.org?format=json");
    const jsonData = await response.json();
    // 直接返回 JSON 对象的特定字符串属性
    return jsonData.ip; // 例如，如果 jsonData 是 { ip: "192.168.1.1" }，则返回 "192.168.1.1"
}

Blazor代码示例：

Blazor端的代码保持不变，因为我们现在确保JavaScript返回的是一个字符串。

// .razor 文件
private async Task GetJSRemoteIP()
{
    string remoteIP = await JSRuntime.InvokeAsync<string>("getIPadr");
    Console.WriteLine($"获取到的IP地址: {remoteIP}"); // remoteIP 现在将是 "192.168.1.1"
}

优点：

• 简单直观，Blazor端无需额外处理。
• 只传输所需数据，减少网络开销（如果JSON对象很大）。

缺点：

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

44

查看详情

• 如果需要JSON对象中的多个属性，或者整个JSON对象，这种方法就不适用。

解决方案二：将JSON对象显式序列化为字符串

如果Blazor端需要接收整个JSON对象（或其大部分内容），则可以在JavaScript端将JSON对象显式地序列化为字符串，然后在Blazor端接收该字符串并进行反序列化。

JavaScript代码示例：

使用JSON.stringify()方法将JSON对象转换为JSON字符串。

// .js 文件
async function getIPadr() {
    const response = await fetch("https://api.ipify.org?format=json");
    const jsonData = await response.json();
    // 将整个 JSON 对象序列化为字符串
    return JSON.stringify(jsonData); // 例如，返回 "{\"ip\":\"192.168.1.1\"}"
}

Blazor代码示例：

Blazor端接收到JSON字符串后，需要使用System.Text.Json.JsonSerializer进行反序列化。

首先，定义一个C#类来匹配JavaScript返回的JSON结构：

// 在 Blazor 项目中定义一个数据模型
public class IpInfo
{
    public string Ip { get; set; }
}

然后，在Blazor组件中调用JavaScript函数并反序列化：

// .razor 文件
using System.Text.Json; // 引入命名空间

private async Task GetJSRemoteIP()
{
    // 接收原始的 JSON 字符串
    string jsonString = await JSRuntime.InvokeAsync<string>("getIPadr");

    // 反序列化 JSON 字符串为 C# 对象
    if (!string.IsNullOrEmpty(jsonString))
    {
        IpInfo ipInfo = JsonSerializer.Deserialize<IpInfo>(jsonString);
        Console.WriteLine($"获取到的IP地址: {ipInfo?.Ip}");
    }
}

优点：

• 可以传输复杂的JSON结构。
• Blazor端获得完整的JSON数据，便于进一步处理。

缺点：

• 需要Blazor端进行额外的反序列化操作。
• 传输的数据量可能更大。

注意事项与最佳实践

1. 类型匹配的重要性： 始终确保JSRuntime.InvokeAsync<T>中的泛型参数T与JavaScript函数实际返回的数据类型（或经过处理后的类型）相匹配。这是避免运行时错误的关键。
2. 错误处理：
   • JavaScript侧： 在异步JavaScript函数中，fetch等操作可能会失败。建议使用try...catch块来捕获潜在的网络错误或API响应错误，并返回一个表示失败的值（例如null或一个错误字符串），以便Blazor端能够识别并处理。
   • Blazor侧： 在Blazor端接收返回值后，应检查其是否为null或空，尤其是在进行反序列化操作之前。
3. 性能考虑： 如果JavaScript函数返回的数据量非常大，频繁地进行序列化和反序列化可能会影响性能。在这种情况下，优先考虑解决方案一（直接返回所需属性）或评估是否有必要在客户端处理更多逻辑以减少跨边界通信。
4. 数据模型定义： 当使用解决方案二时，确保Blazor端定义的C#数据模型与JavaScript返回的JSON结构精确匹配（包括属性名的大小写），以确保JsonSerializer能够正确地进行反序列化。
5. JSRuntime的注入： 确保在Blazor组件中正确注入了IJSRuntime服务。通常通过@inject IJSRuntime JSRuntime指令完成。

总结

在Blazor Server应用中与异步JavaScript函数进行交互并获取返回值时，关键在于理解JavaScript返回的数据类型与Blazor期望接收的数据类型之间的匹配。当JavaScript函数返回JSON对象而Blazor期望字符串时，我们可以选择在JavaScript端直接返回JSON对象的特定字符串属性，或者将整个JSON对象序列化为字符串，并在Blazor端进行反序列化。选择哪种方法取决于业务需求和所需数据的复杂性。通过遵循本文提供的指导和最佳实践，开发者可以有效地管理Blazor与异步JavaScript之间的数据流，构建健壮的交互式应用。

以上就是Blazor Server中异步JavaScript函数返回值获取指南的详细内容，更多请关注php中文网其它相关文章！