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

【问题标题】：How to wait 'for loop next iteration' until FileReader.onload result obtain如何等待'for loop next iteration'直到获得 FileReader.onload 结果
【发布时间】：2018-11-24 16:30:07
【问题描述】：

我们如何处理循环中的异步方法？我在 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

我该怎么做？

【问题讨论】：

Call An Asynchronous Javascript Function Synchronously的可能重复

标签： angular typescript filereader

【解决方案1】：

您需要将文件读取器代码提取到另一个函数中并返回一个 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 的快速示例

【讨论】：

【解决方案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);
  }

【讨论】：

【解决方案3】：

它对我有用，试试..

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

【讨论】：