JS原生请求有哪些？有什么区别？

1. 原生请求有哪些？有什么区别？

• 主要指浏览器提供的两种原生 API：XMLHttpRequest、fetch
• XMLHttpRequest (XHR):
  • 历史:  较老的 API，最早由 IE 引入，后被标准化。
  • 特点:
    • 基于事件和回调函数 (onreadystatechange, onload, onerror 等)。
    • 功能强大且灵活，支持同步（不推荐）和异步请求。
    • 可以获取请求进度 (onprogress)。
    • 兼容性极好（几乎所有浏览器）。
  • 缺点:  回调地狱(Callback Hell)，语法相对繁琐。
• fetch API:
  • 历史:  现代浏览器引入的新 API，基于 Promise。
  • 特点:
    • 基于 Promise，链式调用 (then/catch/finally)，代码更简洁易读，避免回调地狱。
    • 设计更现代化，与 Service Workers 等新特性集成更好。
    • 默认不携带 Cookie（需设置 credentials: 'include'）。
    • 对错误处理有差异：只有网络故障（如无法连接）才会导致 Promise 被 reject，HTTP 错误状态码（如 404, 500）不会导致 reject，需要在 then 里检查 response.ok 或 response.status。
    • 提供更强大的功能选项（如 Request, Response, Headers 对象）。
  • 缺点:  不支持超时设置（需结合 AbortController），不支持请求进度监控（需结合 ReadableStream），兼容性稍逊于 XHR（旧浏览器如 IE 完全不支持）。 主要区别总结:

特性	XMLHttpRequest (XHR)	fetch API
基础	事件/回调	Promise
语法	相对繁琐	更简洁、现代
错误处理	状态码非 2xx 会触发 onerror	HTTP 错误不 reject Promise
Cookie	默认发送	默认不发送 (credentials)
超时	原生支持 (timeout)	需结合 AbortController
进度	原生支持 (onprogress)	需结合 ReadableStream
兼容性	非常好	现代浏览器良好 (IE 不支持)
现代化	较旧	新标准，功能更强大