feat: add concurrentAsync

example/App.vue

@@ -1,18 +1,22 @@
 <template>
+  <h1>所有 demo 以网络请求为例，请打开 Devtool -> Network 查看效果</h1>
   <DebounceAsync />
   <ThrottleAsync />
+  <ConcurrentAsync />
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import DebounceAsync from './components/debounceAsync.vue';
 import ThrottleAsync from './components/throttleAsync.vue';
+import ConcurrentAsync from './components/concurrentAsync.vue';
 
 export default defineComponent({
   name: 'App',
   components: {
     DebounceAsync,
-    ThrottleAsync
-  }
+    ThrottleAsync,
+    ConcurrentAsync,
+  },
 });
 </script>

example/components/concurrentAsync.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { concurrentAsync } from '../../src';
+
+function rawApi<T>(data: T): Promise<T> {
+  const delay = (1 + Math.random() * 3).toFixed(3);
+  console.log('fetch start:', data);
+  return fetch(`https://httpbin.org/delay/${delay}?t=${delay}`, {
+    method: 'GET',
+    mode: 'cors',
+  }).then(() => data);
+}
+
+const concurrentedApi = concurrentAsync(rawApi, 3);
+
+export default defineComponent({
+  setup() {
+    return {
+      onRequest() {
+        for (let i = 0; i < 7; i++) {
+          rawApi(i).then(r => console.log('rez:', i, r));
+        }
+      },
+      onConcurrentRequest() {
+        for (let i = 0; i < 7; i++) {
+          concurrentedApi(i).then(r => console.log('rez:', i, r));
+        }
+      },
+    };
+  },
+});
+</script>
+
+<template>
+  <fieldset>
+    <legend>
+      concurrentAsync
+    </legend>
+    <p>一个限制最大并发的高阶函数</p>
+    <button @click="onRequest">无限制并发请求</button>
+    <button @click="onConcurrentRequest">限制并发请求</button>
+  </fieldset>
+</template>

example/components/throttleAsync.vue

@@ -9,7 +9,6 @@
       <li>原文：https://github.com/bowencool/blog/issues/3</li>
     </ul>
     <button @click="onSubmit">submit(click me quickly)</button>
-    <p>open the devtool to see network</p>
   </fieldset>
 </template>
 

package.json

@@ -26,7 +26,7 @@
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-terser": "^6.1.0",
     "rollup-plugin-typescript2": "^0.27.2",
-    "typescript": "~4.1.5",
+    "typescript": "^4.3.2",
     "vue": "^3.0.11"
   },
   "entry": "src/index.ts",

readme.md

@@ -1 +1,4 @@
-# async-utils
+# async-utils
+
+一个异步工具库，风格以高阶函数为主。
+

src/concurrentAsync.ts

@@ -0,0 +1,51 @@
+/**
+ * @description 限制最大并发数
+ */
+export default function concurrentAsync<T, P extends any[], R>(
+  fn: (this: T, ...p: P) => Promise<R>,
+  maxCount = 3,
+) {
+  let that: T;
+
+  type Resolve = (arg: R) => void;
+  type Reject = (...ers: unknown[]) => void;
+  type Holding = [P, Resolve, Reject];
+
+  const holding: Array<Holding> = [];
+
+  let executing = 0;
+
+  function drain() {
+    if (/* holding.length === 0 ||  */ executing >= maxCount) return;
+    const nextHolding = holding.shift();
+    if (nextHolding) {
+      // console.log('\ndrain', executing);
+      execTask(nextHolding);
+    }
+  }
+
+  function execTask([rawParams, resolve, reject]: Holding) {
+    executing++;
+    // console.log('execTask', executing);
+    fn.apply(that, rawParams)
+      .then((...args) => {
+        resolve(...args);
+        executing--;
+        drain();
+      })
+      .catch((...args) => {
+        reject(...args);
+        executing--;
+        drain();
+      });
+  }
+
+  return function concurrented(this: T, ...rawParams: P): Promise<R> {
+    that = this;
+    const defer = new Promise((r: Resolve, j: Reject) => {
+      holding.push([rawParams, r, j]);
+    });
+    drain();
+    return defer;
+  };
+}

src/index.ts

@@ -1,2 +1,3 @@
 export { default as debounceAsync } from './debounceAsync';
 export { default as throttleAsync } from './throttleAsync';
+export { default as concurrentAsync } from './concurrentAsync';

vue.config.js

@@ -5,6 +5,7 @@ module.exports = {
   pages: {
     index: {
       entry: 'example/index.ts',
+      title: 'async-utils'
     },
   },
   configureWebpack: {

yarn.lock

@@ -7831,10 +7831,10 @@ typedarray@^0.0.6:
   resolved "https://registry.npm.taobao.org/typedarray/download/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@~4.1.5:
-  version "4.1.5"
-  resolved "https://registry.nlark.com/typescript/download/typescript-4.1.5.tgz#123a3b214aaff3be32926f0d8f1f6e704eb89a72"
-  integrity sha1-Ejo7IUqv874ykm8Njx9ucE64mnI=
+typescript@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805"
+  integrity sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==
 
 uglify-js@3.4.x:
   version "3.4.10"