feat: 批量增加接口限制并发数量为5

package.json

@@ -9,7 +9,7 @@
     "prestart": "npm run tailwind:dev",
     "start": "react-scripts start",
     "prebuild": "npm run tailwind:build",
-    "build": "react-scripts build",
+    "build": "cross-env NODE_ENV=production react-scripts build",
     "cz": "git-cz",
     "release": "release-it",
     "test": "react-scripts test",
@@ -28,6 +28,7 @@
     "jwt-decode": "^3.0.0",
     "phosphor-react": "^1.0.0",
     "postcss": "^8.1.10",
+    "promise-limit": "^2.7.0",
     "react": "^16.13.1",
     "react-chartjs-2": "2.9.0",
     "react-dom": "^16.13.1",

src/components/PortEditor.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
+import promiseLimit from 'promise-limit'
 
 import {
   Button,
@@ -15,15 +16,16 @@ import Modal from '../components/Modals/Modal'
 
 import AuthSelector from "../components/AuthSelector"
 import {
+	getServerPorts,
   createServerPort,
-  bulkCreateServerPort,
   editServerPort,
   deleteServerPort,
   editServerPortUsage,
 } from "../redux/actions/ports";
 import { formatSpeed, formatQuota } from "../utils/formatter";
 import { SpeedLimitOptions, QuotaOptions, DueActionOptions, DateOptions } from "../utils/constants"
 
+const CREATE_PORT_LIMIT = 5
 
 const PortEditor = ({ port, serverId, isModalOpen, setIsModalOpen }) => {
   const dispatch = useDispatch();
@@ -77,7 +79,7 @@ const PortEditor = ({ port, serverId, isModalOpen, setIsModalOpen }) => {
     dispatch(editServerPortUsage(serverId, port.id, data));
     setIsModalOpen(false);
   };
-  const submitForm = () => {
+  const submitForm = async () => {
     if (isDelete) {
       dispatch(deleteServerPort(serverId, port.id));
     } else {
@@ -109,25 +111,26 @@ const PortEditor = ({ port, serverId, isModalOpen, setIsModalOpen }) => {
       } else {
         const numStr = num.toString();
         const idx = numStr.indexOf('-')
-        if (idx !== -1) {
-          const start = parseInt(numStr.slice(0, idx))
-          const end = parseInt(numStr.slice(idx + 1))
-          dispatch(bulkCreateServerPort(serverId, [...Array(end - start + 1).keys()].map(i => (
-            {
-              num: i + start,
-              external_num: null,
-              config: {
-                egress_limit: null,
-                ingress_limit: null,
-                valid_until: null,
-                due_action: 0,
-                quota: null,
-                quota_action: 0,
-              }
-            }))));
-        } else {
-          dispatch(createServerPort(serverId, data));
-        }
+				const isBatch = idx !== -1
+				const start = parseInt(numStr.slice(0, idx))
+				const end = parseInt(numStr.slice(idx + 1))
+				const portsData = !isBatch ? data : [...Array(end - start + 1).keys()].map(i => ({
+					num: i + start,
+					external_num: null,
+					config: {
+						egress_limit: null,
+						ingress_limit: null,
+						valid_until: null,
+						due_action: 0,
+						quota: null,
+						quota_action: 0,
+					}
+				}))
+				const limit = promiseLimit(CREATE_PORT_LIMIT)
+				await Promise.all(portsData.map(c => limit(() => new Promise(r => {
+					dispatch(createServerPort(serverId, c)).then(r)
+				}))))
+				await getServerPorts(serverId)
       }
     }
     setIsModalOpen(false);

src/redux/actions/ports.js

@@ -64,23 +64,13 @@ export const getServerPorts = (server_id, page = null, size = null) => {
 };
 
 export const createServerPort = (server_id, data) => {
-  return (dispatch) => {
+  return async (dispatch) => {
     dispatch({ type: LOAD_SERVER_PORTS })
-    serverPortCreate(server_id, data)
+    return serverPortCreate(server_id, data)
       .catch((error) => handleError(dispatch, error))
-      .then(() => dispatch(getServerPorts(server_id)))
   };
 };
 
-export const bulkCreateServerPort = (server_id, data_array) => {
-  return (dispatch) => {
-    dispatch({ type: LOAD_SERVER_PORTS })
-    Promise.all(data_array.map(data => serverPortCreate(server_id, data)))
-      .catch((error) => handleError(dispatch, error))
-      .then(() => dispatch(getServerPorts(server_id)))
-  }
-}
-
 export const deleteServerPort = (server_id, port_id) => {
   return (dispatch) => {
     serverPortDelete(server_id, port_id)