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代码提取到另一个函数中，并返回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

对我有用，请尝试..

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

如何等待“ for循环下一次迭代”，直到获得FileReader.onload结果

3 个答案: