angularjs 是否有一种方法可以保留要发出的HTTP请求,直到挂起的请求数小于N?

xa9qqrwz  于 2022-10-31  发布在  Angular
关注(0)|答案(4)|浏览(140)

我正在做一个用户可以一次性上传N个文件的项目。但是,由于我同时发送N个并行请求(每个文件上传一个请求),这很容易阻塞服务器,并且会开始为所做的请求抛出429(请求太多)错误。
如果已经有K个相同的未决请求,是否有某种方法可以阻止请求的发出(而不阻塞UI)?
下面是一个最小的代码块,给予我们了解一下我目前正在做什么:

filesToUpload.forEach(function(file) {
    // abstract function which converts the given file to base64,
    // prepares the payload, makes a POST request and returns a promise
    upload(file, successCallback, errorCallback);
}
mm9b1k5b

mm9b1k5b1#

我相信最好的方法是在异步函数中发送HTTP请求。
async和await关键字启用基于承诺的异步行为
await关键字将等待您的post请求完成,然后再向存储这些文件的服务器发送新的HTTP请求。
您可以找到有关asyncawait关键字及其语法here的详细信息。

kzmpq1sx

kzmpq1sx2#

您可以使用递归按顺序执行此操作。这将需要修改以处理错误。

(function fn(files, successCallback, errorCallback){
    if(files.length){
        upload(files.shift(), (...args) => {
            successCallback(...args);
            fn(files, successCallback, errorCallback)
        }, errorCallback);
    }
})(filesToUpload, successCallback, errorCallback);
z9zf31ra

z9zf31ra3#

使用循环和队列应该适合您的情况。

const UPLOAD_QUEUE = [];
let progress_queue = [];
const MAX_UPLOADS = 5;

throttledUpload();

function throttledUpload() {
    const max = MAX_UPLOADS - progress_queue.length;
    for(let i = 0; i < UPLOAD_QUEUE.length; i++){
        if(i > max) break;
        uploadFile(UPLOAD_QUEUE[i], i);
    }
    progress_queue = progress_queue.concat(UPLOAD_QUEUE.splice(0, max));
}

async function uploadFile(file, idx) {
    try {
        await upload(file, successCallback, errorCallback);
        throttledUpload();
    } catch (err) {
        UPLOAD_QUEUE.push(file);
    } finally {
        progress_queue.splice(idx, 1);
        throttledUpload();
    }
}
js81xvg6

js81xvg64#

下面的示例使用了经典回调:允许最多K次并行上传,否则等待。函数upload可转换为Promise。
第一个

相关问题