h5网络请求方式

传统网络请求方式

XMLHttpRequest（XHR）

• 原理：通过创建XMLHttpRequest对象，手动配置请求参数（如URL、方法、头信息），并通过事件监听器（如onreadystatechange）处理响应。
• 特点：
  • 支持所有浏览器（包括IE6+）。
  • 需手动处理回调逻辑,易陷入“回调地狱”。
  • 可兼容处理老旧服务器返回的XML或文本数据。
• 示例代码：

  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/data');
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send();

JSONP（JSON with Padding）

• 原理：通过动态插入<script>标签，利用浏览器对脚本资源的跨域支持，绕过同源策略限制，服务器返回的数据需包裹在回调函数中。
• 特点：
  • 仅支持GET请求。
  • 存在安全风险（如数据被改动）。
  • 依赖服务器端配合返回回调函数。
• 适用场景：老旧浏览器跨域请求（如IE低版本）。
• 示例代码：

  <script>
    function handleResponse(data) {
      console.log(data);
    }
  </script>
  <script src="https://example.com/api?callback=handleResponse"></script>

现代网络请求方式

Fetch API

• 原理：基于Promise的接口，提供更简洁的语法和链式调用能力，支持GET、POST等HTTP方法，默认不携带凭证（需手动配置credentials）。
• 特点：
  • 语法简洁,支持.then()和async/await。
  • 自动解析JSON（需调用.json()方法）。
  • 需通过Headers对象设置请求头，且默认不发送Cookie。
• 示例代码：

  fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

Axios（第三方库）

• 原理：基于XMLHttpRequest和Promise封装，提供统一的API接口，支持浏览器和Node.js环境。
• 特点：
  • 自动转换JSON数据。
  • 支持拦截器（请求/响应前处理）。
  • 自动处理跨域（通过代理或CORS）。
• 示例代码：

  axios.get('/api/data')
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

其他网络通信方式

WebSocket

• 原理：建立双向通信通道，适用于实时数据推送（如聊天室、股票行情）。
• 特点：
  • 持久连接,减少重复握手开销。
  • 不支持所有浏览器（IE10+）。
  • 需服务器端支持WebSocket协议。
• 示例代码：

  const socket = new WebSocket('wss://example.com/socket');
  socket.onmessage = event => console.log(event.data);

Server-Sent Events（SSE）

• 原理：服务器单向推送数据，客户端通过EventSource接收。
• 特点：
  • 轻量级,适合实时更新（如日志监控）。
  • 自动重连机制。
  • 仅支持文本数据。
• 示例代码：

  const eventSource = new EventSource('/events');
  eventSource.onmessage = event => console.log(event.data);

网络请求方式对比表

常见问题与解答（FAQs）

Q1：如何选择Fetch API和Axios？

• A：优先使用原生Fetch API，因其轻量且无依赖，若项目需统一处理错误、拦截请求或兼容低版本浏览器，可选择Axios，Axios支持自动转换JSON和防御XSRF攻击，适合复杂场景。

Q2：为什么JSONP逐渐被淘汰？

• A：JSONP存在安全破绽（如CSRF攻击）且仅支持GET请求，现代浏览器通过CORS解决跨域问题，而Fetch和Axios均支持CORS，无需依赖JSONP的复杂回调逻辑，JSONP无法处理POST请求和自定义头信息，限制较多。