Blazor Server如何从异步JavaScript函数获取返回值？

你的核心问题是类型不匹配：异步JS函数返回的是JSON对象，但Blazor代码里用InvokeAsync<string>尝试接收，导致无法正确反序列化。以下是两种可行的解决方案：

方案1：让JS直接返回IP字符串 #

修改JS函数，返回API返回的具体IP字段（而非整个JSON对象），和Blazor的string类型匹配：

async function getIPadr() {
    const response = await fetch("https://api.ipify.org?format=json");
    const jsonData = await response.json();
    return jsonData.ip; // 返回字符串类型的IP地址
}

Blazor端代码无需修改，await JSRuntime.InvokeAsync<string>("getIPadr")就能正常获取到IP字符串。

方案2：定义C#模型接收完整JSON对象 #

如果需要获取API返回的完整JSON数据，先在C#中定义对应的数据模型：

public class IpResponse
{
    public string Ip { get; set; }
}

然后修改Blazor调用代码，指定接收类型为IpResponse：

private async Task GetJSRemoteIP()
{
    IpResponse ipResponse = await JSRuntime.InvokeAsync<IpResponse>("getIPadr");
    string remoteIP = ipResponse.Ip;
}

JS函数保持原代码即可，Blazor会自动将JSON对象反序列化为对应的C#模型实例。

额外注意事项 #

确保在组件生命周期的合适时机调用JS互操作方法（比如OnAfterRenderAsync），避免组件未初始化完成时JSRuntime不可用的问题。

内容的提问来源于stack exchange，提问作者EyeSeeSharp