前端异步并发请求的工具函数

据说是头条高频面试题

按照要求，此请求工具函数的核心目标是控制异步并发请求的上限。在浏览器中，请求已经是天生的异步动作，我们只需要控制同步代码中触发异步动作的上限即可。

最为简洁清晰的思路：

异步并发：一口气发 max 个请求（如果可能的话，因为 urls 总数可能也不超过 max）
请求的定制化：需要在单个 fetch 请求的回调函数里做三件事：
- 接收响应数据（基本职责）
- 如果还有未发送的请求，则继续发送一个请求
- 如果已经将所有请求的响应数据接收完毕，执行总的回调函数

嗯，send 函数的本质就是异步递归（不断追加到队列，而不是栈增长）了。

function sendRequest(urls, max, callback) {
  let undoneSize = urls.length
  let res = []

  // 定制请求函数的具体逻辑
  function send(url) {
    fetch(url).then((response) => {
      // 汇总响应数据，实际生产代码的逻辑，肯定更复杂一些
      res.push([url, response.status])
      // 如果还有请求，则继续发一个
      if (urls.length > 0) send(urls.pop())
      // 未完成任务的数量减一
      undoneSize--
      // 当未完成任务数量等于 0 时，表示全部 url 请求完毕，执行总的回调函数
      if(undoneSize === 0) callback(res)
    })
  }

  // 一口气发送 max 个请求（如果有可能的话）
  while (max > 0 && urls.length > 0) {
    send(urls.pop())
    max -= 1
  }
}

let url = 'http://localhost:3000/'

sendRequest(Array(40).fill(url), 30, res => console.log(res, res.length))

xxleyi / learning_list

前端异步并发请求的工具函数 #207