如果 100 个请求,该怎么用 Promise 去控制并发?

问题描述:

如果 100 个请求,该怎么用 Promise 去控制并发?

思路:

将关键步骤拆分出合适的函数来组织代码
1、循环去启动能执行的任务
2、取出任务并且推到执行器执行
3、执行器内更新当前的并发数,并且触发捞起任务
4、捞起任务里面可以触发最终的回调函数和调起执行器继续执行任务

// 异步函数,发送多个请求
async function sendRequests(url, paramsList, concurrentLimit) {
  const results = []; // 存储每个请求的结果

  let currentIndex = 0; // 当前请求的索引
  while (currentIndex < paramsList.length) { // 当仍有未处理的请求时
    const concurrentRequests = []; // 存储当前批次的并发请求
    for (let i = 0; i < concurrentLimit && currentIndex < paramsList.length; i++) {
      // 对于每个请求,将参数取出并构建一个请求Promise
      const params = paramsList[currentIndex];
      const requestPromise = makeRequest(url, params);
      concurrentRequests.push(requestPromise); // 将请求Promise添加到当前批次的并发请求列表中
      currentIndex++; // 增加当前请求的索引
    }

    try {
      const responses = await Promise.all(concurrentRequests); // 等待并发请求批次完成
      console.log("请求成功:", responses);
      results.push(...responses); 
    } catch (error) {
      console.error("请求出错:", error); 
    }
  }

  return results; // 返回所有请求的结果数组
}

const url = 'https://api.example.com/endpoint'; // 替换为实际的请求接口
const paramsList = [{ data: '1' }, { data: '2' }, { data: '3' }]; // 请求参数列表
const concurrentLimit = 100; // 同时进行的请求数量

sendRequests(url, paramsList, concurrentLimit) // 发送请求
  .then(results => {
    console.log("所有请求完成"); // 所有请求完成时打印消息
    console.log("结果数组:"); // 打印结果数组的标识
    results.forEach((result, index) => {
      console.log(index, result); // 打印每个结果的索引和值
    });
  })
  .catch(error => {
    console.error("请求出错", error); // 请求过程中出现错误时打印错误消息
  });

以下是使用Promise封装的Vue并发请求优化的代码示例: ```javascript // 在Vue组件中使用axios库进行请求 import axios from 'axios'; export default { data() { return { responseData: [], // 存储每个请求的响应数据 }; }, methods: { fetchData(url) { return new Promise((resolve, reject) => { axios.get(url) .then(response => { resolve(response.data); }) .catch(error => { console.error(error); reject(null); }); }); }, fetchParallel() { const urls = [ // 这里填你需要请求的URL列表 'https://example.com/api/1', 'https://example.com/api/2', // ... 'https://example.com/api/100', ]; // 分批并发请求,每次并发10个请求 const batchSize = 10; const batches = Math.ceil(urls.length / batchSize); const batchPromises = []; for (let i = 0; i < batches; i++) { const batchUrls = urls.slice(i * batchSize, (i + 1) * batchSize); const batchPromises = batchUrls.map(url => this.fetchData(url)); batchPromises.push(...batchPromises); } Promise.all(batchPromises) .then(responses => { this.responseData = responses; console.log(this.responseData); // 输出所有请求的响应数据 }); }, }, }; ``` 在上述代码中,`fetchData`方法使用Promise进行封装。在封装的Promise中,使用`axios.get`发送GET请求,并在成功时通过`resolve`方法返回响应数据,在失败时通过`reject`方法返回null。 在`fetchParallel`方法中,定义了需要请求的URL列表,并按照每批10个URL进行划分。使用`fetchData`方法对每个URL创建一个Promise,并将这些Promise存储在`batchPromises`数组中。最后,使用`Promise.all`等待所有Promise执行完毕,并将所有响应数据存储在`responseData`数组中。 最后,可以通过`console.log`输出所有请求的响应数据。 这是一个使用Promise封装的并发请求优化示例,你可以根据实际情况进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值