发送请求 JS 是现代网页交互的基石，选择合适的方法直接影响应用的响应速度与开发效率。
发送请求 JS 方法有哪些
XMLHttpRequest 与 Fetch API 的对比
业内专家指出,从技术演进角度看，XMLHttpRequest 作为早期方案，依赖回调函数实现异步，代码层级嵌套后容易变得臃肿，而 Fetch API 基于 Promise 原生支持 async/await，链式调用更清晰。两者核心差异包括：
- 错误处理机制：Fetch 默认只在网络故障时 reject，状态码 400/500 不会抛异常，需手动检查 response.ok。
- 请求体格式：XMLHttpRequest 支持 FormData、Blob 等类型，Fetch 同样覆盖并通过 Request 对象统一管理。
- 使用场景：XMLHttpRequest 在旧浏览器兼容和进度监听上仍有优势，Fetch 在灵活性和现代语法上更胜一筹。
Axios 在请求封装中的实际价值
行业共识认为,Axios 的流行源于它对请求与响应拦截、自动转换 JSON、基于 XHR 封装兼容性的支持，据统计，超过 60% 的中大型项目选择 Axios 作为 HTTP 库，具体优势包括：
- 拦截器机制：在请求发出前添加 Header，响应回来后统一处理错误码。
- 请求取消：通过 CancelToken 实现，比 Fetch 的 AbortController 更早普及。
- 防御型代码：自动适配服务端返回的数据结构，减少手动解析步骤。
发送请求 JS 实战场景详解
处理表单数据提交
假设需要提交用户注册信息,表单包含文本与文件，实际操作路径如下：
- 在 React 组件中收集表单值，构建 FormData 实例。
使用 Fetch 发送 POST 请求，不设置 Content-Type，由浏览器自动携带 multipart/form-data。 - 监听上传进度：改用 XMLHttpRequest 并绑定 progress 事件，每 500ms 计算已传输字节与总字节的比值。
文件上传与错误重试
文件上传场景中,网络波动可能导致请求中断，推荐方案：
- 采用 XMLHttpRequest 的 upload.onerror 捕获失败，自动重试最多 3 次。
- 配合断点续传逻辑,记录已传输的分片索引，下次请求时从该位置继续。
- 行业白皮书建议,对超过 100MB 的文件使用分片上传，每片 5MB 并计算 MD5 校验。
跨域请求与 CORS 配置
前端开发者在请求第三方 API 时经常遇到跨域限制，触发条件包括请求头自定义字段、带凭证（cookies）或不同协议/域名，应对策略：
- 服务端设置 Access-Control-Allow-Origin 为具体域名或 。
- 前端使用代理服务器转发请求,绕过浏览器同源策略。
- 若需发送 cookies，设置 credentials: ‘include’，但后端 Access-Control-Allow-Origin 不能为 。
发送请求 JS 性能对比与优化
请求方法对加载速度的影响
| 方法 | 请求开销 | 阻塞渲染 | 适用场景 |
|---|---|---|---|
| XMLHttpRequest | 中等 | 异步不阻塞 | 兼容旧浏览器 |
| Fetch API | 较低 | 不阻塞 | 现代应用 |
| Axios | 稍高（封装层） | 不阻塞 | 需要拦截功能 |
根据统计，使用 Fetch 原生方法可减少约 15% 的请求初始化时间，而 Axios 的封装层在复杂项目中带来的代码简化远超这点损耗。
缓存策略与请求合并
- 强缓存：对静态资源设置 Cache-Control: max-age=31536000，减少重复请求。
具体操作：在 Service Worker 中拦截请求，匹配缓存则直接返回。 - 请求合并：当多个模块依赖相同数据源时，使用 Promise 去重 + 延迟合并技术，收集 50ms 内的所有相同 URL 请求，只发一次并共享结果。
– 预加载：在页面空闲时段通过 预先请求关键资源，降低后续点击的延迟。
发送请求 JS 常见问题解答
发送请求 JS 哪种方法更适合移动端网络优化？
移动端网络延迟高且不稳定,推荐使用 Fetch API 配合 AbortController 实现超时控制，同时利用 Service Worker 缓存先发结果，提高弱网下的首屏速度，Axios 的拦截器可用于统一处理重试逻辑，但需注意避免频繁重试导致流量浪费。
发送请求 JS 如何处理请求超时？
在 Fetch 中通过 AbortController 设置超时：创建 controller 实例，将 signal 传入请求，在 setTimeout 中调用 controller.abort，Axios 提供 timeout 配置项，单位毫秒，超时自动抛错，建议超时阈值设为 10 秒，避免用户等待过久。
发送请求 JS 在 Node.js 环境中如何实现
Node.js 使用内置的 http/https 模块或第三方库如 node-fetch（轻量级）和 axios（功能丰富），node-fetch 提供与浏览器 Fetch 一致接口，支持 async/await，适合服务端请求其他 API，axios 在 Node.js 中支持自动 Cookie 解析与文件流处理，性能稳定。
首发原创文章，作者：王坚，如若转载，请注明出处：https://test.idctop.com/article/498890.html
