如何从 Blazor 调用 JS 异步方法
How to invoke JS async method from Blazor
我正在尝试使用 Blazor
提供的 JSInterop
读取一些文件。问题是即使在 .C#
我等待方法,它似乎没有 await
it.Thus 我无法检索 js
.
提供的结果
C#
<input name="start" type="file" onchange="@(async(x)=>await OnChangeS(x))" />
@functions{
private const string S = "start";
public async Task OnChangeS(UIChangeEventArgs ev) {
var str = await JSRuntime.Current.InvokeAsync<string>("methods.readFile", S);
Console.WriteLine("From blazor data is:" + (string.IsNullOrEmpty(str) ? "empty" : str));
}
}
JS
window.methods = {
readFile: function (fileName) {
let reader = new FileReader();
var file = document.querySelector('input[type=file ][name=' + fileName + ']').files[0];
var data = null;
reader.onload = () => {
data = reader.result;
console.log("from load data is"+data);
};
reader.onloadend = () => { console.log("from loadend data is"+data);return data };
reader.readAsText(file);
}
}
输出:
给定样本 json
文件:{ "name":"adita","age":33}
这是我的输出顺序:
WASM: Blazor S:empty
Fread.js:11 from load data is: {
"name":"adita",
"age":33
}
Fread.js:14 from loadend data is: {
"name":"adita",
"age":33
}
所以我的问题是为什么 Blazor
没有等待该方法?
我已经通过将我的 FileReader
结果包装成 Promise
来解决它。正如 @Kirk Woll 指出的那样,我实际上并没有发回任何东西。
window.methods = {
readFile: function (fileName) {
let reader = new FileReader();
return new Promise((resolve, reject) => {
var file = document.querySelector('input[type=file ][name=' + fileName + ']').files[0];
reader.onerror = () => { reader.abort(); reject("Error parsing file"); };
reader.onload = () => {
var data = reader.result;
console.log("from load data is: " + data);
resolve(data);
};
reader.readAsText(file);
});
}
}
我正在尝试使用 Blazor
提供的 JSInterop
读取一些文件。问题是即使在 .C#
我等待方法,它似乎没有 await
it.Thus 我无法检索 js
.
C#
<input name="start" type="file" onchange="@(async(x)=>await OnChangeS(x))" />
@functions{
private const string S = "start";
public async Task OnChangeS(UIChangeEventArgs ev) {
var str = await JSRuntime.Current.InvokeAsync<string>("methods.readFile", S);
Console.WriteLine("From blazor data is:" + (string.IsNullOrEmpty(str) ? "empty" : str));
}
}
JS
window.methods = {
readFile: function (fileName) {
let reader = new FileReader();
var file = document.querySelector('input[type=file ][name=' + fileName + ']').files[0];
var data = null;
reader.onload = () => {
data = reader.result;
console.log("from load data is"+data);
};
reader.onloadend = () => { console.log("from loadend data is"+data);return data };
reader.readAsText(file);
}
}
输出:
给定样本 json
文件:{ "name":"adita","age":33}
这是我的输出顺序:
WASM: Blazor S:empty
Fread.js:11 from load data is: {
"name":"adita",
"age":33
}
Fread.js:14 from loadend data is: {
"name":"adita",
"age":33
}
所以我的问题是为什么 Blazor
没有等待该方法?
我已经通过将我的 FileReader
结果包装成 Promise
来解决它。正如 @Kirk Woll 指出的那样,我实际上并没有发回任何东西。
window.methods = {
readFile: function (fileName) {
let reader = new FileReader();
return new Promise((resolve, reject) => {
var file = document.querySelector('input[type=file ][name=' + fileName + ']').files[0];
reader.onerror = () => { reader.abort(); reject("Error parsing file"); };
reader.onload = () => {
var data = reader.result;
console.log("from load data is: " + data);
resolve(data);
};
reader.readAsText(file);
});
}
}