前端面试题：for循环100个接口，每次只调3个

在前端开发中，当需要使用 for 循环调用 100 个接口，并且每次只调用 3 个接口时，我们可以利用异步编程的特性来实现并发控制。以下是几种不同的实现方式：

方法一：使用 async/await 和 Promise

// 模拟接口请求
function fetchApi(url) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(`请求接口: ${url}`);
            resolve(url);
        }, Math.random() * 1000);
    });
}

// 并发控制函数
async function concurrentFetch(urls, concurrency) {
    let index = 0;
    async function worker() {
        while (index < urls.length) {
            const url = urls[index++];
            await fetchApi(url);
        }
    }

    // 创建并发任务
    const workers = Array.from({ length: concurrency }, worker);
    await Promise.all(workers);
}

// 生成 100 个接口地址
const apiUrls = Array.from({ length: 100 }, (_, i) => `https://api.example.com/${i}`);

// 每次并发调用 3 个接口
concurrentFetch(apiUrls, 3).then(() => {
    console.log('所有接口请求完成');
});

代码解释：

1. fetchApi 函数：模拟一个接口请求，返回一个 Promise，在随机时间后完成。
2. concurrentFetch 函数：
   • index 变量用于记录当前处理的接口索引。
   • worker 函数是一个异步函数，用于处理接口请求，只要还有未处理的接口，就会不断取出一个接口进行请求。
   • 创建 concurrency 个 worker 任务，并使用 Promise.all 等待所有任务完成。
3. 生成接口地址：使用 Array.from 生成 100 个接口地址。
4. 调用并发控制函数：调用 concurrentFetch 函数，每次并发调用 3 个接口。

方法二：使用递归和 Promise

// 模拟接口请求
function fetchApi(url) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(`请求接口: ${url}`);
            resolve(url);
        }, Math.random() * 1000);
    });
}

// 并发控制函数
function concurrentFetch(urls, concurrency) {
    let index = 0;
    let inProgress = 0;

    function next() {
        if (index >= urls.length && inProgress === 0) {
            console.log('所有接口请求完成');
            return;
        }

        while (inProgress < concurrency && index < urls.length) {
            const url = urls[index++];
            inProgress++;
            fetchApi(url).then(() => {
                inProgress--;
                next();
            });
        }
    }

    next();
}

// 生成 100 个接口地址
const apiUrls = Array.from({ length: 100 }, (_, i) => `https://api.example.com/${i}`);

// 每次并发调用 3 个接口
concurrentFetch(apiUrls, 3);

代码解释：

1. fetchApi 函数：模拟一个接口请求，返回一个 Promise，在随机时间后完成。
2. concurrentFetch 函数：
   • index 变量用于记录当前处理的接口索引。
   • inProgress 变量用于记录当前正在进行的请求数量。
   • next 函数是一个递归函数，用于处理接口请求。当有空闲的并发名额且还有未处理的接口时，会取出一个接口进行请求，并更新 inProgress 变量。当一个请求完成时，会减少 inProgress 变量，并调用 next 函数继续处理下一个接口。
3. 生成接口地址：使用 Array.from 生成 100 个接口地址。
4. 调用并发控制函数：调用 concurrentFetch 函数，每次并发调用 3 个接口。