这是一个创建于 442 天前的主题，其中的信息可能已经有所发展或是发生改变。
前文
浏览器能够并行发送请求，但是每次并行发送请求的个数是有限制的，以 chrome 浏览器为例子：
同一个域名下，同一个 GET 请求的并发数是 1 ，也就是说只有上一个请求结束，才会执行下一个请求，否则置入队列等待发送。 同一个域名下，不同 GET/POST 请求的并发数是 6 。当发送的请求数量达到 6 个，并且都没有得到响应时，后面的请求会置入队列等待发送。
测试
useEffect( () => { for (let i = 0; i < 10; i++) { requestDelay(); } console.log(randoms) }, []) const SLEEP_MS = 1000; useEffect(() => { const interval = setInterval(() => { requestInstant(); }, SLEEP_MS); return () => clearInterval(interval); // This represents the unmount function, in which you need to clear your interval to prevent memory leaks. }, []) requestDelay(); 这个方法在后端会无限超时(sleep 10000000 秒)。 requestInstant(); 这个方法会立即返回。
当前的表象是:
第一秒:requestDelay()已经发送出网络请求，后端已经收到。后续的 requestDelay()没有向后端发送请求，目测已经进入队列。 第二秒到第十几秒:每秒都会 requestInstant()请求到后端，且立即返回。 然后就是发送了五次 requestDelay()请求，后端已收到。 后续的 requestInstant()请求已经卡住，一直没有向后端发送请求。 疑问:我一直以为从第二秒开始就一直会每秒请求 requestInstant()，且立即返回。不知道为什么会后续又发送 5 次的 requestDelay()请求？老哥们帮忙解释下。
第 1 条附言 2024-07-25 14:13:23 +08:00
const requestDelay = async () => {
const respOnse= await axios.get('/api/delay')
console.log(response.data)
}
const requestInstant = async () => {
const respOnse= await axios.get('/api/users')
console.log(response.data)
}
server: {
proxy: {
'/api': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
secure: false,
},
},
},
请求的后端是本地的后端，接口/api/delay 在后端无限 sleep ，接口/api/users 在后端是马上返回
const respOnse= await axios.get('/api/delay')
console.log(response.data)
}
const requestInstant = async () => {
const respOnse= await axios.get('/api/users')
console.log(response.data)
}
server: {
proxy: {
'/api': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
secure: false,
},
},
},
请求的后端是本地的后端，接口/api/delay 在后端无限 sleep ，接口/api/users 在后端是马上返回
 | 1 jones2000 2024-07-25 11:21:30 +08:00 一个域名下同时请求并发是 5 个左右吧， 超了就要等。 可以使用批量动态域名来规避。 |
 | 2 lisongeee 2024-07-25 11:29:36 +08:00 浏览器这个不好控制，建议使用 https://www.npmjs.com/package/p-limit |
 | 3 lsk569937453 OP @jones2000 同一个域名下，不同 GET/POST 请求的并发数是 6 。我的意思是程序启动开始，10 次循环执行完。此时只有一个 requestDelay 发送了请求并且一直 hang 住，剩余的 9 个在消息队列中。而后面我每秒发一次 requestInstant 预期是应该不受影响。 然而表象是在某个时间点，chrome 又把队列中的 5 个 requestDelay 请求拿出来发送网络请求且 hang 住，此时达到最大并发数 6 ，后续的 requestInstant 也进入队列，不再发送请求。并且影响了此域名下后续要发送的所有的 http 请求。 |
| 4 jones2000 2024-07-25 11:37:23 +08:00 @lsk569937453 自己做一个数据请求队列不就完事了。 |
 | 5 crz 2024-07-25 11:45:01 +08:00 看起来意思是同时只要一个 delay 长链接，建议自己 promise 队列 同一个 get 请求的并发数是 1 这个有出处吗？ |
 | 6 pursuer 2024-07-25 11:47:34 +08:00 @lsk569937453 可能请求超时的时候策略不确定吧。这种依赖浏览器平台规则的特性随时可能变 |
 | 7 Projection 2024-07-25 11:56:15 +08:00 requestDelay() 前面要加 await 才行，不然你这样就是开启 10 个请求，后面 requestInstant() 只能排队 |
 | 8 remon 2024-07-25 12:53:11 +08:00 贴一下请求的瀑布图吧。 还有就是你的请求是 GET 还是 POST ，请求参数和地址是不是都一致？ BTW：建议开启 HTTP2 可以避免阻塞 |
 | 9 IvanLi127 2024-07-25 12:59:59 +08:00 我有个问题，你的前文是对的吗？我只看到浏览器在使用 http1 时会根据主机做请求的限制，没看到和请求方法在这方面有限制 |
 | 10 zhhbstudio 2024-07-25 14:19:45 +08:00 @lsk569937453 #3 我觉得理论上的情况是： 1. for 循环发送 6 个 requestDelay 请求被 hang 住，4 个进入队列 2. 1 秒后每秒 1 个 requestInstant 加入队列。 3. 超时后 4 个 delay 发出，然后 requestInstant 按顺序发出。 PS：不熟悉 React ，也没实际遇到过这种情况 |
Select Language