XHR

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

#concept #growing #network #browser #http #javascript

[!info] related notes

所属 MOC: HTTP 与前端网络请求 MOC

实践概念: AJAX

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

XHR

XMLHttpRequest（XHR）是浏览器提供的请求 API，以事件和回调观察请求状态。它能读取多种数据格式，不限于 XML；Fetch 是采用 Promise 与 Request/Response 抽象的另一种 API。

请求与错误

load 表示传输完成，HTTP 404/500 也会触发它；需另查状态码。error、timeout、abort 是不同的终止路径。

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/user');
xhr.timeout = 8000;
xhr.onload = () => {
  if (xhr.status < 200 || xhr.status >= 300) {
    console.error(`HTTP ${xhr.status}`);
    return;
  }
  // 此接口约定返回 JSON；204 没有响应体。
  if (xhr.status === 204) return;
  try {
    console.log(JSON.parse(xhr.responseText));
  } catch (error) {
    console.error('invalid JSON', error);
  }
};
xhr.onerror = () => console.error('network or browser access error');
xhr.ontimeout = () => console.error('request timeout');
xhr.onabort = () => console.log('request aborted');
xhr.send();

适用能力与边界

可监听下载 progress 与 xhr.upload 上传进度。总长度只有在 lengthComputable 为真时才可用于计算百分比。
用 xhr.abort() 终止客户端请求，不代表撤销服务端已发生的操作。
同样受浏览器同源策略和 CORS 限制。
主线程同步 XHR 会阻塞界面，不应把同步模式当作普通请求方案。

参考

MDN：XMLHttpRequest