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

如果你有100个请求需要发送,并且希望同时最多发送一定数量的请求,你可以使用 Promise 和 async/await 来控制并发。以下是一个可能的实现:

const urls = [/* 100个url */];
const maxConcurrency = 5; // 最多同时发送的请求数量

async function fetchData(url) {
  // 发送请求的异步函数
  const response = await fetch(url);
  return response.json();
}

async function fetchAll() {
  // 使用一个数组来存储所有请求的Promise
  const promises = [];
  let running = 0; // 当前正在运行的请求数量

  // 遍历所有url
  for (const url of urls) {
    // 如果当前请求数量已经达到了最大并发量,等待其中一个请求完成
    while (running >= maxConcurrency) {
      await Promise.race(promises);
      running--;
    }

    // 发送请求,并将Promise添加到数组中
    const promise = fetchData(url);
    promises.push(promise);
    running++;
  }

  // 等待所有Promise完成
  return Promise.all(promises);
}

fetchAll()
  .then(results => {
    // 所有请求完成后的处理
  })
  .catch(error => {
    // 错误处理
  });

在上述代码中,我们首先定义了一个包含100个URL的数组,并且定义了最多同时发送5个请求的变量。然后我们定义了一个async函数`fetchData`,用于发送单个请求并返回响应的JSON数据。接下来,我们定义了另一个async函数`fetchAll`,它使用一个数组来存储所有请求的Promise。

在`fetchAll`函数中,我们使用一个for循环遍历所有URL,同时使用一个while循环来等待并发请求数量少于最大并发数。在while循环中,我们使用`Promise.race`函数来等待其中一个Promise完成,并从数组中删除它,以便我们可以继续发送其他请求。

在for循环中,我们发送请求并将其Promise添加到数组中。最后,我们使用`Promise.all`函数等待所有Promise完成,并在完成后对结果进行处理。

请注意,在此示例中,我们使用了ES6中的`async/await`语法,它需要在支持该语法的JavaScript环境中运行。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用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、付费专栏及课程。

余额充值