Javascript 429多个文件上载时请求过多-角度7
当我试图同时上传几百个以上的文件时,我遇到了这个问题 API接口仅用于一个文件,因此我必须调用发送每个文件的服务。现在我有这个:Javascript 429多个文件上载时请求过多-角度7,javascript,angular,typescript,angular7,http-status-code-429,Javascript,Angular,Typescript,Angular7,Http Status Code 429,当我试图同时上传几百个以上的文件时,我遇到了这个问题 API接口仅用于一个文件,因此我必须调用发送每个文件的服务。现在我有这个: onFilePaymentSelect(event): void { if (event.target.files.length > 0) { this.paymentFiles = event.target.files[0]; } let i = 0; let save = 0; const numFiles
onFilePaymentSelect(event): void {
if (event.target.files.length > 0) {
this.paymentFiles = event.target.files[0];
}
let i = 0;
let save = 0;
const numFiles = event.target.files.length;
let procesed = 0;
if (event.target.files.length > 0) {
while (event.target.files[i]) {
const formData = new FormData();
formData.append('file', event.target.files[i]);
this.payrollsService.sendFilesPaymentName(formData).subscribe(
(response) => {
let added = null;
procesed++;
if (response.status_message === 'File saved') {
added = true;
save++;
} else {
added = false;
}
this.payList.push({ filename, message, added });
});
i++;
}
}
因此,我确实有时间将每个文件发送到API,但我在大量文件上收到消息“429太多请求”。有什么方法可以改进这一点吗?使用可观察对象将使该任务更容易推理(而不是使用命令式编程) 浏览器通常允许您并行发出6个请求,并将其他请求排队。但我们不希望浏览器为我们管理队列(或者如果我们在节点环境中运行,我们就不会为ex管理队列) 我们想要什么:我们想要上传很多文件。通过在任何时间并行运行5个请求,它们应该尽可能高效地排队和上传。(因此,我们为应用程序中的其他请求保留1个免费) 为了演示这一点,让我们先构建一些模拟:
function randomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const mockPayrollsService = {
sendFilesPaymentName: (file: File) => {
return of(file).pipe(
// simulate a 500ms to 1.5s network latency from the server
delay(randomInteger(500, 1500))
);
}
};
// array containing 50 files which are mocked
const files: File[] = Array.from({ length: 50 })
.fill(null)
.map(() => new File([], ""));
我认为上面的代码是不言自明的。我们正在生成mock,这样我们就可以看到代码的核心实际上是如何运行的,而不必真正访问您的应用程序
现在,主要部分是:
const NUMBER_OF_PARALLEL_CALLS = 5;
const onFilePaymentSelect = (files: File[]) => {
const uploadQueue$ = from(files).pipe(
map(file => mockPayrollsService.sendFilesPaymentName(file)),
mergeAll(NUMBER_OF_PARALLEL_CALLS)
);
uploadQueue$
.pipe(
scan(nbUploadedFiles => nbUploadedFiles + 1, 0),
tap(nbUploadedFiles =>
console.log(`${nbUploadedFiles}/${files.length} file(s) uploaded`)
),
tap({ complete: () => console.log("All files have been uploaded") })
)
.subscribe();
};
onFilePaymentSelect(files);
- 我们使用
将文件一个接一个地发送到一个可观察的数据库中from
- 使用
,我们准备了对1个文件的请求(但由于我们没有订阅该文件,而且可观察到的文件是冷的,所以请求只是准备好的,没有触发!)map
- 我们现在使用
来运行调用池。由于mergeMap
将并发性作为参数,我们可以说“请同时运行最多5个调用”mergeMap
- 然后,我们使用
仅用于显示目的(计算已成功上载的文件数)scan
打开控制台,查看我们不是一次上载所有请求您可以使用
间隔
来调整请求的速度。给我一点时间,我将进行堆栈闪电战,因为解释更难