npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@blueking/combine-request

v1.0.1

Published

合并请求通用工具类,适用于组件拆分但希望合并数据请求场景,同时可用于控制异步方法分片执行。

Downloads

30

Readme

combine-request

合并请求通用工具类,适用于组件拆分但希望合并数据请求场景,同时可用于控制异步方法分片执行。 理论上,此工具实现的是一个延时执行模型,即执行目标可以是异步请求或者任何普通函数,编排后的执行可由使用方自行处理。

安装

npm install @blueking/combine-request

使用

实例化

interface IDataItem {
  id: number;
  name: string;
}

const combineRequest = new CombineRequest<IDataItem[]>(
  data => {
    console.log(data); // 合并起来的所有参数数据
    return new Promise(resolve => {
      setTimeout(() => {
        resolve([{ id: 1, name: '1' }]);
      }, 1000);
    });
  },
  2, // 参数分段大小,可选
  2, // 迸发大小,可选
);

单例模式,在同一组件中发起请求调用时非常有用

// 假设 comp.vue 中在页面中被使用10次,组件中存在以下调用
const combineRequestInstance = CombineRequest.setup<IDataItem[]>(Symbol.for('myCombineRequest'), data => {
  console.log(data);
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([{ id: 1, name: '1' }]);
    }, 3000);
  });
});

combineRequestInstance.add(Math.random())

// 最终将确保回调只执行1次,data参数为10个Math.random()元素数组
(10) [0.7344740349564569, 0.19415064068295118, 0.1062907681339258, 0.4052586915078804, ...]

getPromise 参数不分段、不控制迸发时使用

const combineRequest = new CombineRequest<IDataItem[]>(data => {
  console.log(data);
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([{ id: 1, name: '1' }]);
    }, 1000);
  });
});

combineRequest.add(1)
combineRequest.add(2)
combineRequest.add(3)

let i = 4;
while (i < 10) {
  combineRequest.add(i);
  i++;
}

console.log(await combineRequest.getPromise());

// 收集到的所有参数
(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 输出结果,1次完成调用
[
    {
        "id": 1,
        "name": "1"
    }
]

getSplitPromise 参数分段、不控制迸发时使用

const combineRequest = new CombineRequest<IDataItem[]>(data => {
  console.log(data);
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([{ id: 1, name: '1' }]);
    }, 1000);
  });
}, 2);

combineRequest.add(1)
combineRequest.add(2)
combineRequest.add(3)

let i = 4;
while (i < 10) {
  combineRequest.add(i);
  i++;
}

for (const result of await combineRequest.getSplitPromise()) {
  console.log(await result);
}

// 参数根据2个一组拆分,需要5次执行完成调用
(2) [1, 2]
(2) [3, 4]
(2) [5, 6]
(2) [7, 8]
[9]

// 对应5次执行的结果
[{…}]
[{…}]
[{…}]
[{…}]
[{…}]

getSlicePromise 参数分段、控制迸发时使用

const combineRequest = new CombineRequest<IDataItem[]>(
  data => {
    console.log(data);
    return new Promise(resolve => {
      setTimeout(() => {
        resolve([{ id: 1, name: '1' }]);
      }, 3000);
    });
  },
  2,
  2,
);

combineRequest.add(1)
combineRequest.add(2)
combineRequest.add(3)

let i = 4;
while (i < 10) {
  combineRequest.add(i);
  i++;
}

for (const q of await combineRequest.getSlicePromise()) {
  console.time('time');
  const x = await q;
  for (const y of x) {
    if (y.status === 'fulfilled') {
      y.value.forEach(v => {
        console.timeEnd('time');
        console.log(v);
      });
    } else {
      console.log(y.reason);
    }
  }
}

// 参数根据2个一组拆分,需要5次执行完成调用,但调用并不是一次性全部触发的,而是按2次一个迸发控制执行的
(2) [1, 2]
(2) [3, 4]
time: 3001.669189453125 ms
{id: 1, name: '1'}
{id: 1, name: '1'}

// 每次迸发2个,在上一次调用执行完成之后才继续下一次
(2) [5, 6]
(2) [7, 8]
time: 3000.383056640625 ms
{id: 1, name: '1'}
{id: 1, name: '1'}

[9]
time: 3001.5419921875 ms
{id: 1, name: '1'}

// waterfall示意
-----
-----
     -----
     -----
          -----