泰裤辣！Axios 控制全局并发只需 20 行代码 ~

🎃 前言

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

👍 亲测可用

📄 话不多说，直接上代码

import axios from 'axios'

const queue = [], max = 3

axios.interceptors.request.use(async config => {
  const p = new Promise(r => queue.push((config._resolve = r)))
  if (queue.length > max) await p
  return config
})

axios.interceptors.response.use(onHandle, onHandle)

function onHandle(res) {
  queue[max]?.()
  const resolve = res.config._resolve
  queue.includes(resolve) && queue.splice(queue.indexOf(resolve), 1)
  return res
}

max 设置了最大 3 个并发

🚀 测试

for (let i = 0; i < 40; i++) {
  axios.get('https://ip.useragentinfo.com/json')
}

上面代码一次性请求 40 次，可以在 Network 中看到，实际上最多只有 3 个并发请求

在线测试

Edit on StackBlitz ⚡️

Nice ~