【前端】页面瞬间请求一百次，你怎么玩？

前端并发数控制：实现思路、使用场景及具体实现

在前端开发中，我们常常需要同时发送多个请求来获取数据。如果不加限制地并发请求，可能会导致网络拥堵和服务器过载。因此，对请求进行并发数控制是非常有必要的。本文将详细介绍几种前端并发数控制的实现方式，包括其实现思路、使用场景及具体代码实现。

一、使用 Promise.all 和限制并发数量

实现思路

这种方式的核心思想是创建一个控制并发数的函数，通过限制同时执行的 Promise 来控制并发请求数。我们将所有任务放入一个数组中，每次执行任务时，都会检测当前正在执行的请求数，如果达到了限制数量，就等待其中一个请求完成后再继续执行下一个任务。

使用场景

适用于需要在前端进行大量并发请求的场景，例如在页面加载时批量获取数据，但需控制同时进行的请求数来避免网络阻塞和服务器压力。

实现代码

async function limitConcurrent(tasks, limit) {
    const results = [];
    const executing = [];
    
    for (const task of tasks) {
        const p = Promise.resolve().then(() => task());
        results.push(p);

        if (limit <= tasks.length) {
            const e = p.then(() => executing.splice(executing.indexOf(e), 1));
            executing.push(e);
            if (executing.length >= limit) {
                await Promise.race(executing);
            }
        }
    }

    return Promise.all(results);
}

// Example usage
const tasks = [
    () => fetch('/api/1'),
    () => fetch('/api/2'),
    () => fetch('/api/3'),
    () => fetch('/api/4')
    // Add more tasks as needed
];

limitConcurrent(tasks, 2).then(results => {
    console.log(results);
}).catch(error => {
    console.error(error);
});

二、使用第三方库 p-limit

实现思路

p-limit 是一个轻量级的第三方库，专门用于控制并发任务数。你只需要指定并发数量和需要控制的任务，它会自动进行并发数的管理。

使用场景

适用于希望使用社区维护的解决方案，以减少代码量和维护成本的场景。

实现代码

首先需要安装 p-limit：

npm install p-limit

然后在代码中使用：

const pLimit = require('p-limit');
const limit = pLimit(2);

const tasks = [
    limit(() => fetch('/api/1')),
    limit(() => fetch('/api/2')),
    limit(() => fetch('/api/3')),
    limit(() => fetch('/api/4'))
    // Add more tasks as needed
];

Promise.all(tasks).then(results => {
    console.log(results);
}).catch(error => {
    console.error(error);
});

三、队列方式控制并发数

实现思路

使用一个队列来控制任务的调度，通过有限数量的工作线程来处理请求。每当一个任务完成时，新的任务将被推入到空闲的线程中继续执行。可以借助 async 库的 queue 函数实现。

使用场景

适用于需要更加精细化的任务调度方案的场景。

实现代码

首先需要安装 async 库：

npm install async

然后在代码中使用：

const async = require('async');

const tasks = [
    callback => fetch('/api/1').then(response => callback(null, response)),
    callback => fetch('/api/2').then(response => callback(null, response)),
    callback => fetch('/api/3').then(response => callback(null, response)),
    callback => fetch('/api/4').then(response => callback(null, response))
    // Add more tasks as needed
];

const queue = async.queue((task, callback) => {
    task(callback);
}, 2); // 2 represents the number of concurrent workers

queue.push(tasks, (err, result) => {
    if (err) {
        console.error(err);
    } else {
        console.log(result);
    }
});

queue.drain(() => {
    console.log('All tasks have been processed');
});

四、使用迭代器生成器

实现思路

通过使用生成器函数和迭代器来控制并发，可以创建一个异步生成器函数，通过 yield* 和 await 关键字实现并发控制。

使用场景

适用于复杂的流程控制，特别是需要在过程中进行动态调整的场景。

实现代码

async function* fetchUrls(urls, limit) {
    let i = 0;
    const results = new Array(urls.length);
    const executing = new Set();

    function enqueue() {
        if (i === urls.length) return Promise.resolve();

        const idx = i++;
        const p = Promise.resolve().then(() => fetch(urls[idx]).then(response => {
            results[idx] = response;
            executing.delete(p);
        }));
        executing.add(p);

        const r = p.then(() => enqueue());
        if (executing.size >= limit) {
            return Promise.race(executing).then(() => r);
        }

        return r;
    }

    yield* (async function* () {
        while (i < urls.length) {
            await enqueue();
        }
        yield* results;
    })();
}


const urls = ['/api/1', '/api/2', '/api/3', '/api/4'];
const urlIterator = fetchUrls(urls, 2);

(async () => {
    for await (const result of urlIterator) {
        console.log(result);
    }
})();

总结

以上四种方式分别适用于不同的使用场景，可以根据具体需求进行选择和实现：

1. 使用 Promise.all 和限制并发数量：适合简单的并发控制场景。
2. 使用第三方库 p-limit：适合希望使用社区维护的解决方案。
3. 队列方式控制并发数：适合需要精细化任务调度的场景。
4. 使用迭代器生成器：适合复杂流程控制的场景。

希望这篇文章对你在前端并发数控制方面有所帮助。Happy coding!