javascript中的Fetch API是什么_它与传统的XMLHttpRequest有什么区别

Fetch API 是基于 Promise 的现代网络请求接口，语法简洁、支持 async/await；默认不带 Cookie，需显式配置 credentials；仅网络错误才 reject，HTTP 错误需手动检查；通过 AbortController 可中断请求。

Fetch API 是 JavaScript 中用于发起网络请求的现代接口，它基于 Promise，语法简洁、逻辑清晰，比传统的 XMLHttpRequest（XHR）更易用、更符合当前开发习惯。

Fetch 更简洁，写法更直观

Fetch 使用函数式调用，直接传入 URL 和配置对象，返回 Promise，天然支持 async/await；而 XHR 需要手动创建实例、监听事件、处理状态码，步骤繁琐。

• Fetch 示例：fetch('/api/data').then(res => res.json()).then(data => console.log(data))
• XHR 示例：需 new XMLHttpRequest()、设置 onreadystatechange、检查 readyState 和 status，再手动解析响应体

Fetch 默认不带 Cookie，需显式配置

Fetch 默认不会发送或接收 cookies（即 credentials: 'omit'），这对安全是默认保障；而 XHR 默认会携带当前域 Cookie（类似浏览器自动行为）。

• 如需发送 Cookie，Fetch 必须写：fetch(url, { credentials: 'include' })
• 否则跨域请求可能因缺少认证信息而失败，这点容易被忽略

Fetch 的错误处理逻辑不同

Fetch 只有在网络彻底失败（如断网、DNS 错误）时才 reject Promise；HTTP 状态码如 404、500 仍算“成功”，需手动检查 response.ok 或 response.status。

标签： javascript java js json cookie 浏览器 ai dns 跨域 状态码 区别 red