涉及多个请求时如何在每个 POST 请求之间保持时间间隔答案

【问题标题】：How to keep a time gap between each POST request when multiple requests are involved涉及多个请求时如何在每个 POST 请求之间保持时间间隔
【发布时间】：2022-11-03 16:32:00
【问题描述】：

我正在使用 Angular 14。我正在创建一个具有“取消正在进行的上传”功能的文件上传器组件。假设我在上传器组件中拖放了 4 个图像文件，现在我要从 UI 中按下上传按钮。单击后将调用以下方法。

  uploadFiles() {
    this.droppedFileArray.map((item) => {
      item.fileEntry.file((file: File) => {
        if (this.isFileSizeAllowed(file.size)) { // file size validation
          if (this.files.length < 6) { // number of files validation
            const formData = new FormData();
            formData.append('excel', file);
            const headers = new HttpHeaders({
              'x-request-id': 'file_upload_' + new Date().getTime(), // using timestamp for uniqueness
            });

            timer(10000) // 10 sec timer to mimic slow internet
              .pipe(
                switchMap(() =>
                  this.http.post(
                    'http://localhost:8090/my-service/file-uploader/upload',
                    formData,
                    {
                      headers: headers,
                      responseType: 'json',
                    }
                  )
                )
              )
              .pipe(catchError((err) => this.handleError(err)))
              .subscribe((res: any) => {
                // display message: 'File successfully uploaded',
              });
          } else {
              // display message: 'File limit exceeded.',
          }
        } else {
            // display message: 'file is too big',
        }
      });
    });
  }

其他信息：

droppedFileArray 是一个对象数组，其中每个对象是有关文件的信息：

我的代码有问题：

即使我使用来自RxJs 的timer(10000)，我的代码也会一次性上传所有选定的文件。
要求：
1. 每次上传之间应该有 10 秒或更多的间隔。我想要这种延迟，以便我可以模仿缓慢的互联网并稍后测试我的取消上传功能。

【问题讨论】：

您是否尝试使用Chrome slow connection 进行模仿。
是的，我也知道节流。但我仍然需要在每个请求之间保持间隔

标签： angular

【解决方案1】：

它同时对所有文件进行 emmetting，因为您生成了不依赖于另一个的 observables。对于每个文件，在计时器后拨打电话。

您可以使用 rxjs 中的带有 mergeMap 的间隔来处理此问题：

uploadFiles() {
    // 1. filter files that are too big and files number
    if (this.droppedFileArray.length > 6) {
      return // 'File limit exceeded.',
    }

    if (this.droppedFileArray.filter(file => !this.isFileSizeAllowed(file.size)).length) {
      return // 'file is too big',
    }

    // 2. upload files

    interval(10000)
      .pipe(
        map((index) => this.droppedFileArray[index]),
        mergeMap((file) => {
          const formData = new FormData();
          formData.append('excel', file);
          const headers = new HttpHeaders({
            'x-request-id': 'file_upload_' + new Date().getTime(), // using timestamp for uniqueness
          });
          return this.http.post(
            'http://localhost:8090/my-service/file-uploader/upload',
            formData,
            {
              headers: headers,
              responseType: 'json',
            }
          ).pipe(
            catchError((err) => this.handleError(err)),
            tap(() => {
              // 'File successfully uploaded',
            })
          )
        })
      ).subscribe({
        complete: () => {
          // 'All files uploaded',
        }
      });
  }

而且，我最近发现这个帖子abour rxjs operators ，很容易理解运营商的工作原理。

【讨论】：