英文:
FileReader should complete onload function first then process further
问题
我想要读取上传的文件，并通过服务API调用发送文件中的内容。但是Onload函数最后执行。我希望首先执行onload函数，然后才继续下一步。
checkInScript(file: File, scriptName: string): Observable<Response>{
console.log("****Before Calling Method***");
this.checkValidFile(file).then((value) => {
console.log("****value****", value);
this.fileValue.next(value);
});
console.log("****After Calling method***");
const formData = new FormData();
formData.append('updateScript', this.fileValue.value);
console.log("****Form Data***");
return this.http.post(this.mccScriptOperationURL + '/updateScript/' + scriptName, formData);
}
checkValidFile(file: File): Promise<string>{
const fileReader = new FileReader();
fileReader.readAsText(file);
return new Promise((resolve) => {
fileReader.onload = () => {
console.log("****Inside on Load*****");
resolve(fileReader.result.toString());
};
});
}
当前执行顺序是：
Before Calling Method*
After Calling method*
Form Data*
Inside on Load*
value
所需执行顺序是：
Before Calling Method*
Inside on Load*
value*
After Calling method*
Form Data
英文:
I want to read the uploaded file and send those contents inside file via service API Call. But Onload function executes at last.I want onload function to be executed first then only move to further steps
checkInScript(file: File, scriptName: string): Observable<Response>{
console.log("****Before Calling Method***");
this.checkValidFile(file).then((value) => {
console.log("****value****",value);
this.fileValue.next(value);
})
console.log("****After Calling method***");
const formData = new FormData();
formData.append('updateScript', this.fileValue.value);
console.log("****Form Data***");
return this.http.post(this.mccScriptOperationURL + '/updateScript/' + scriptName, formData);
}
checkValidFile(file: File): Promise<string>{
const fileReader = new FileReader();
fileReader.readAsText(file);
return new Promise((resolve) => {
fileReader.onload = () => {
console.log("****Inside on Load*****");
resolve(fileReader.result.toString());
};
});
}
Current Execution pattern is :
Before Calling Method*
After Calling method*
Form Data*
Inside on Load*
value
Required Execution Pattern is:
Before Calling Method*
Inside on Load*
value*
After Calling method*
Form Data`
答案1
得分: 0
我之前本打算建议与@JaromandaX相同的方法，但后来意识到可能会引起空值问题。我认为等待checkValidFile应该按正确的顺序工作。
async checkInScript(file: File, scriptName: string): Observable<Response> {
console.log("****调用方法前***");
const value = await this.checkValidFile(file);
console.log("****value****", value);
this.fileValue.next(value);
console.log("****调用方法后***");
const formData = new FormData();
formData.append('updateScript', this.fileValue.value);
console.log("****表单数据***");
return this.http.post(this.mccScriptOperationURL + '/updateScript/' + scriptName, formData);
}
checkValidFile(file: File): Promise<string> {
const fileReader = new FileReader();
fileReader.readAsText(file);
return new Promise((resolve) => {
fileReader.onload = () => {
console.log("****加载完成*****");
resolve(fileReader.result.toString());
};
});
}
英文:
I was earlier going to suggest the same method as @JaromandaX but then realized the null problem that would create. I think awaiting the checkValidFile should work as expected, in the correct sequential order.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
async checkInScript(file: File, scriptName: string): Observable < Response > {
console.log("****Before Calling Method***");
const value = await this.checkValidFile(file);
console.log("****value****", value);
this.fileValue.next(value);
console.log("****After Calling method***");
const formData = new FormData();
formData.append('updateScript', this.fileValue.value);
console.log("****Form Data***");
return this.http.post(this.mccScriptOperationURL + '/updateScript/' + scriptName, formData);
}
checkValidFile(file: File): Promise < string > {
const fileReader = new FileReader();
fileReader.readAsText(file);
return new Promise((resolve) => {
fileReader.onload = () => {
console.log("****Inside on Load*****");
resolve(fileReader.result.toString());
};
});
}
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论