如何等待'for loop next iteration'直到文件读取器加载结果获取

Question

我们如何在循环中处理异步方法？我在Angular程序中遇到了一个问题，我无法处理异步方法。我想等待异步方法。有没有办法在for循环中等待异步方法。

这是我的代码：

msg: string[] = [];  
filePicked() {
this.msg = [];
this.msg.push("file picked");
const file: File = new File([""], "C:UsersArun GirivasanDownloadsabout.jpg");
for (var i = 0; i < 10; i++) {
const reader = new FileReader();
reader.onload = () {
this.msg.push("file loaded successfully");
}
reader.readAsDataURL(file);

this.msg.push(i.toString());
}

html:

<div *ngFor="let m of msg">{{m}}</div>

输出：

file picked  
0  
1  
2  
3  
4  
5  
6  
7  
8  
9  
file loaded successfully  
file loaded successfully  
file loaded successfully  
file loaded successfully  
file loaded successfully  
file loaded successfully  
file loaded successfully  
file loaded successfully  
file loaded successfully  

我想要像这样的输出：

file picked
file loaded successfully  
0  
file loaded successfully  
1  
file loaded successfully  
2  
file loaded successfully  
3  
file loaded successfully  
4  
file loaded successfully  
5  
file loaded successfully  
6  
file loaded successfully  
7  
file loaded successfully  
8  
file loaded successfully  
9  

我该怎么做？

Answer 1

您需要将filereader代码提取到另一个函数中，并返回Promise或Observable。

private readFile(file: File): Observable<string> {
return new Observable(obs => {
const reader = new FileReader();
reader.onload = () => {
obs.next(reader.result as string);
obs.complete();
}
reader.readAsDataURL(file);
});
}

我在Observable上准备了一个快速示例https://stackblitz.com/edit/angular-pt3pbv

Answer 2

我们可以通过递归来实现
这对我很有效：

ngOnInit() {
this.filePicked();
}
filePicked() {
this.msg = [];
this.msg.push("file picked");
const file: File = new File(["abcd"], "C:UsersArun GirivasanDownloadsabout.jpg");

this.customLoop(0, 10, file);
}
customLoop(index: number, limit: number, file: File) {
this.readFileUrl(file, (msg: string) => {
this.msg.push(msg);
this.msg.push(index.toString());
if (index < limit - 1) {
this.customLoop(++index, limit, file);
}
});
}
readFileUrl(file: File, callback: (msg: string) => any) {
const reader = new FileReader();
reader.onload = (function (f) {
return function (e) {
callback("file loaded successfully");
}
})(file);
reader.readAsDataURL(file);
}

Answer 3

它对我有效，试试。。

file64=[];
reader.onloadend =(e) =>{


var result = reader.result; 
console.log(i+'/'+result)
this.file64.push(result)
};