XHR

XMLHttpRequest (XHR) 概念与用法：事件驱动请求模型、错误处理与与 Fetch 的差异。

#type / concept #status / growing #tech / network #platform / browser #resource / http #resource / javascript

[!info] related notes

所属 MOC: http-and-frontend-networking-moc

对比: frontend-http-requests-xhr-fetch-axios

XHR

MDN 明确说 Fetch 是 promise-based，而 XHR 更多是事件/回调式接口。(MDN Web Docs)

XHR 的特点：

浏览器原生
历史悠久
事件驱动写法偏繁琐
可以细粒度监听请求过程

MDN 把它定义为用于程序化发 HTTP 请求的 API，并指出 Fetch API 是它的现代替代品。(MDN Web Docs)

一个很传统的 XHR 写法：

const xhr = new XMLHttpRequest()
xhr.open('GET', '/api/user')
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText))
  }
}
xhr.onerror = function () {
  console.error('network error')
}
xhr.send()