如何等待 'for loop next iteration' 直到 FileReader.onload 结果获得

Question

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

这是我的代码：

msg: string[] = [];  

filePicked() {
    this.msg = [];
    this.msg.push("file picked");
    const file: File = new File([""], "C:\Users\Arun Girivasan\Downloads\about.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 代码提取到另一个函数和 return 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);
    });
}

我在 https://stackblitz.com/edit/angular-pt3pbv

准备了一个 Observable 的简单示例

Answer 2

我们可以通过使用我们自己的自定义循环来循环代码来做到这一点。
这对我有用：

ngOnInit() {
    this.filePicked();
  }

  filePicked() {
    this.msg = [];
    this.msg.push("file picked");
    const file: File = new File(["abcd"], "C:\Users\Arun Girivasan\Downloads\about.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

it works for me, try ..

file64=[];
reader.onloadend =(e) =>{
            
    
              var result = reader.result; 
                  console.log(i+'/'+result)
                  this.file64.push(result)
            };

如何等待 'for loop next iteration' 直到 FileReader.onload 结果获得

How to wait 'for loop next iteration' until FileReader.onload result obtain

filereader

typescript

angular