javascript - concatMap 无法处理数组中的所有项目

Question

我正在处理一组文件。对于每个文件，我需要请求正确的上传 URL，然后将该文件上传到正确的端点。

concatMap应该仅在前一个值完成后发出。这样，文件就应该被顺序处理。

这是我的代码:

filesChanged(e) {

const files_raw = e.srcElement.files;

of(files_raw)
.pipe(
  flatMap((file) => file),
  tap((file) => console.log("Firing 1", file)),
  concatMap((file) => {
    return this.ms.fetchUploadURL().pipe(withLatestFrom(of(file)));
  }),
  tap((file) => console.log("Firing 2", file)),
  concatMap((values) => {
    return this.ms.uploadDirectToS3(values[0], values[1])
      .pipe(tap(value => console.log('From request', value)), withLatestFrom(of(values[0])));
  })
)
.subscribe(event => {
  console.log('In Subscribe', event);
});
}

如果我尝试上传 4 个文件，此代码将在控制台中记录以下输出:
Firing 1
Firing 1
Firing 1
Firing 1
Firing 2
From request <value>
In Subscribe <value>


换句话说，仅处理并上传第一个文件。所有其他文件似乎都被忽略。这是为什么？

当第一个 URL 完成后，它不应该开始获取第二个 URL 吗？

另外，如果我改变concatMap至mergeMap ，那么它确实可以工作，但它会同时处理所有文件，而不是顺序处理。我想将并发选项传递给 mergeMap可能有帮助，但作用与 concatMap 相同。

Answer 1

首先，我尝试在这里模拟您的情况:https://stackblitz.com/edit/rxjs-ijfky6?devtoolsheight=60 。请注意，我使用 mergeMap 而不是 flatMap，但它们完全相同。

根据这样的模拟以及我所看到的实现逻辑，您得到的结果是有意义的，并且您可能只看到 1 次“Firing 2”，因为在第二次调用 uploadDirectToS3 时发生了一些错误>。也许您应该向 subscribe 添加一个错误函数，如上面的模拟所示。

话虽如此，我想您应该在代码中进行一些更正才能获得您想要的结果。

让我们从一个简单的开始。您可以替换

of(files_raw)
.pipe(
  flatMap((file) => file),

使用from(files_raw)。

现在让我们进入要点的核心。您想通过 this.ms.fetchUploadURL() 函数获取要使用的 url (顺便说一句，令我惊讶的是，此类函数没有任何参数，这表明它总是返回相同的值，但这与这里无关)。然后您要调用 this.ms.uploadDirectToS3，并将 url 和 file 作为参数传递。如果是这种情况，您应该首先调用 this.ms.fetchUploadURL()，然后通过运算符 switchMap switch 到 this.ms.uploadDirectToS3 返回的其他可观察值。这些操作应在 concatMap 内执行，以便按顺序执行它们。

最终的代码可能看起来像这样

from(files_raw)
.pipe(
  tap((file) => console.log("Firing 1", file)),
  concatMap((file) => {
    return fetchUploadURL().pipe(
      tap((file) => console.log("Firing 2", file)),
      switchMap(url => uploadDirectToS3(url, file))
    );
  }),
)
.subscribe(
  d => console.log('subscribe', d),
  err => console.error(err)
)

这里是新代码的模拟 https://stackblitz.com/edit/rxjs-whip1l?devtoolsheight=60