JavaScript网络请求

XHR

XMLHttpRequest（XHR）是浏览器提供的一个原生对象，可在不刷新页面的情况下与服务器通信。

• 缺点：

  • 功能比较底层
  • 写法不够直观
  • 回调地狱
  • API 设计偏老旧和繁琐

• 实例：

  const xhr = new XMLHttpRequest();
  xhr.open("GET", "https://api.example.com/data");
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const data = JSON.parse(xhr.responseText); // 需要手动解析
      console.log(data);
    }
  };
  xhr.send();

Fetch

Fetch 是浏览器原生的、用于替代 XHR 的现代 API。它基于 Promise，语法更简洁、更强大。

• 优点：

  • 写法简洁，支持 async/await
  • 返回 Promise 对象
  • 对请求/响应流有更强大的控制能力

• 缺点：

  • 默认不会将非 2xx 状态码视为错误，只有在网络故障时才会 reject，需要手动处理
  • 需要手动设置请求头、处理超时等
  • 兼容性很好，但在非常旧的浏览器中需要 polyfill

• 实例：

  fetch("/api/data")
    .then((res) => res.json())
    .then((data) => console.log(data));
  
  const res = await fetch("/api/data");
  const data = await res.json();
  console.log(data);

Axios

Axios 是一个基于 Promise 网络请求库，作用于 node.js 和浏览器中。 它是 isomorphic 的（即同一套代码可以运行在浏览器和 node.js）。在服务端使用原生 node.js http 模块，在客户端（浏览器）使用 XMLHttpRequest。

• 优点：

  • 自动将非 2xx 状态码视为错误，进入 catch，更符合直觉
  • 内部支持 XHR（浏览器） 和 http 模块（node.js）
  • 自动处理 JSON，无需 response.json()
  • 拦截器机制（请求、响应都能统一处理）
  • 内置请求取消、超时控制、CSRF 保护等功能
  • 兼容性更好（解决了 fetch 在旧浏览器里的问题）

• 实例：

  import axios from "axios";
  
  axios
    .get("/api/data")
    .then((res) => console.log(res.data))
    .catch((error) => console.error("Error:", error));
  
  const res = await axios.get("/api/save");
  console.log(res.data);

官方文档：https://axios-http.com/zh/docs/intro

Ajax

Asynchronous JavaScript and XML（Ajax）不是一项具体的技术而是一个术语，描述的是一种 Web 开发技术方案：通过在后台与服务器进行少量数据交换，可以使网页实现异步局部更新，而不是刷新整个页面。带来了更好的用户体验，让 Web 应用变得像桌面应用一样流畅。

XHR 和 Fetch 都是浏览器提供的、实现 Ajax 效果的原生技术。Axios 是一个基于原生技术封装的、更易用的第三方库，其目的也是为了实现 Ajax。

更多：https://juejin.cn/post/6844903469896171533

WebSocket

Web Socket（套接字）的目标是通过一个长时连接实现与服务器全双工、双向通信。在 JavaScript 中创建 Web Socket 时，一个 HTTP 请求会发送到服务器以初始化连接。服务器响应后，连接使用 HTTP 的 Upgrade 头部会从 HTTP 协议切换到 Web Socket 协议，这意味着 Web Socket 不能通过标准 HTTP 服务器实现，而必须使用支持该协议的专有服务器。

因为 Web Socket 使用了自定义协议，所以 URL 方案（scheme）稍有变化：不能再使用 http:// 或 https://，而要使用 ws://和 wss://。前者是不安全的连接，后者是安全连接。在指定 Web Socket URL 时，必须包含 URL 方案，因为将来有可能再支持其他方案。

使用自定义协议而非 HTTP 协议的好处是客户端与服务器之间可以发送非常少的数据，不会对 HTTP 造成任何负担。使用更小的数据包让 Web Socket 非常适合带宽和延迟问题都比较明显的移动应用。但使用自定义协议的缺点是，定义协议的时间比定义 JavaScript API 要长。Web Socket 得到了所有主流浏览器支持。

更多：
http://www.ruanyifeng.com/blog/2017/05/websocket.html
https://juejin.cn/post/6844903544978407431