时间戳

首页 > 解决方案 > 如何同步执行异步代码Angular 5

angular - 如何同步执行异步代码Angular 5

问题描述

我有一个迭代文件列表的函数，然后对于每个文件，它调用一个异步方法，该方法执行一些图像操作，然后将图像推送到一个数组。

问题是异步调用同时发生，因此它锁定了 UI。所以我想遍历列表，但只在前一个完成时调用该函数。

Array.from(files).forEach(data => {
    if (data.size > 5000000) {
        this.toastr_service.error('FILE ' + data.name + ' EXCEEDS FILE SIZE LIMIT (5MB)');
    }else {
        this.asyncFunc(data).subscribe(result => {
            this._photos.push(result);
        }, error => {
            console.log(error);
        });
    }
});

标签： angulartypescriptasynchronous

解决方案

使用map数组的功能以及 RxJS 的功能forkJoin

forkJoin(Array
  .from(files)
  .map(file => file.size < 5000000 && this.asyncFunc(file) || undefined)
  .filter(value => !!value)
).subscribe(([...responses]) => {
  console.log(responses);
  this._photos.push(...responses);
});

forkJoin将在文件大小低于 5Mb 的情况下进行所有调用（map并filter注意这一点），一旦进行了所有调用，响应将被推送到您的数组中。

编辑如果您希望对呼叫进行排序，请concat改用：

concat(...Array
  .from(files)
  .map(file => file.size < 5000000 && this.asyncFunc(file) || undefined)
  .filter(value => !!value)
).subscribe((...responses) => {
  this._photos.push(...responses);
  console.log(this.photos);
});

推荐阅读