JavaScript/TypeScript 实现并发请求控制的示例代码

首先，实现并发请求控制的核心是利用 Promise 和 async/await 特性，统计当前请求并发数和控制请求的执行顺序。以下是一个 JavaScript 的示例代码：

const MAX_REQUESTS = 5 // 设置最大并发请求数量
let currentRequest = 0 // 当前请求并发数计数器

// 请求响应函数，返回 Promise
const request = (url) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`Response from ${url}`)
    }, 1000)
  })
}

// 并发控制函数，返回 Promise
const limitConcurrency = async (urls) => {
  const results = []
  for (let i = 0; i < urls.length; i++) {
    if (currentRequest >= MAX_REQUESTS) {
      await new Promise((resolve) => {
        const interval = setInterval(() => {
          if (currentRequest < MAX_REQUESTS) {
            clearInterval(interval)
            resolve()
          }
        }, 1000)
      })
    }
    currentRequest++
    const result = await request(urls[i])
    results.push(result)
    currentRequest--
  }
  return results
}

// 示例函数，调用并发控制函数展示效果
const main = async () => {
  const urls = ['url1', 'url2', 'url3', 'url4', 'url5', 'url6', 'url7', 'url8', 'url9', 'url10']
  const results = await limitConcurrency(urls)
  console.log(results)
}

main() // 执行示例函数

以上代码中，定义了一个最大并发请求数量 MAX_REQUESTS，和一个当前请求并发数计数器 currentRequest。request 函数模拟了一次请求，返回 Promise 类型的 response。limitConcurrency 函数控制并发数和请求顺序，对每个请求的执行结果进行收集，最终返回 Promise 类型的结果数组 results。main 函数仅作为示例调用 limitConcurrency 函数，控制同时发出 10 个请求，观察并发控制结果。

第二个示例代码是 TypeScript 实现版本，基本逻辑与 JavaScript 版本相同，但增加了类型注解和一些简化操作：

const MAX_REQUESTS = 5 // 设置最大并发请求数量
let currentRequest = 0 // 当前请求并发数计数器

// 请求响应函数，返回 Promise
const request = (url: string): Promise<string> =>
  new Promise((resolve) =>
    setTimeout(() => resolve(`Response from ${url}`), 1000)
  )

// 并发控制函数，返回 Promise
const limitConcurrency = async (urls: string[]): Promise<string[]> => {
  const results: string[] = []
  for (const url of urls) {
    if (currentRequest >= MAX_REQUESTS) {
      await new Promise((resolve) => {
        const interval = setInterval(() => {
          if (currentRequest < MAX_REQUESTS) {
            clearInterval(interval)
            resolve(null)
          }
        }, 1000)
      })
    }
    currentRequest++
    results.push(await request(url))
    currentRequest--
  }
  return results
}

// 示例函数，调用并发控制函数展示效果
const main = async () => {
  const urls = [
    'url1',
    'url2',
    'url3',
    'url4',
    'url5',
    'url6',
    'url7',
    'url8',
    'url9',
    'url10',
  ]
  const results = await limitConcurrency(urls)
  console.log(results)
}

main() // 执行示例函数

以上代码中，增加了函数和形参类型注解，并使用了 for...of 语法替换了常规的 for 循环语句。这是因为 TypeScript 具备更强的类型检查功能，可以自动识别数组的项类型。这样可以避免一些类型错误和转换操作，让代码更简洁易懂。