FireFox中JavaScript Fetch API多API请求不符合预期问题求助
Firefox中Fetch API POST请求被JS文件请求阻塞的问题
问题现象
我在实现基础懒加载时,同时发起两个请求:一个GET请求获取大体积的.js文件,另一个POST请求获取JSON数据。POST请求的响应速度远快于JS文件下载,但在**MacOS平台的FireFox 117.0.1(64位)**中,即便代码里优先等待POST请求完成,它也会被JS文件的请求阻塞,必须等JS下载完成后才返回结果。Chrome、Edge、Safari均无此问题。
预期行为:JS文件在后台下载时,先输出POST请求的结果日志,等JS下载完成后再输出JS文件内容的日志。实际情况是两条日志几乎同时打印,POST请求完全未按预期优先完成。
可复现代码
HTML代码
<!DOCTYPE html> <html> <head> <title>Problem with Fetch API and Firefox</title> </head> <body> <h1>Running</h1> <script> (async () => { try { const fetch1Promise = fetch('http://localhost:3004/javascript.js',{ method: 'GET', }); const formData = new FormData(); formData.append("time", 2000); const fetch2Promise = fetch('https://localhost:3004/api/controller/test',{ method: 'POST', body: formData }) const response2 = await fetch2Promise; fetchContent2 = await response2.json(); console.log('Second script content:', fetchContent2); const response1 = await fetch1Promise; const fetchContent1 = await response1.text(); console.log('First script content:', fetchContent1); } catch (error) { console.error('An error occurred:', error); } })(); </script> </body> </html>
后端C# .NET接口代码
[HttpPost] [Route("test")] public async Task<ActionResult> Test([FromForm] int time) { await Task.Delay(time); return Ok(new {}); }
浏览器表现差异
- Chrome:先打印POST请求的结果日志,等待约2秒后打印JS文件内容的日志
- Firefox:两条日志几乎同时打印,无明显时间差
求FireFox下的解决办法,或者告知该问题是否无法解决。
内容的提问来源于stack exchange,提问作者Matthew Dickson
相关产品推荐
相关产品推荐

