Web 开发前端与后端 API 的交互

1. XMLHttpRequest (XHR)

简介：
最早的浏览器原生 API，用于异步请求数据（如 AJAX）。
代码示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

特点：

• 兼容性：支持所有浏览器（包括旧版 IE）。

• 缺点：API 设计冗长，需手动处理状态和错误。

• 用途：传统项目或需要兼容老浏览器时使用。

2. Fetch API

简介：
现代浏览器原生提供的更简洁的 HTTP 请求 API，基于 Promise。
代码示例：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) throw new Error('Network error');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

特点：

• 优点：语法简洁，支持 Promise，可配合 async/await。

• 缺点：

  • 默认不会携带 Cookie（需配置 credentials: 'include'）。

  • 不直接支持超时设置（需用 AbortController 实现）。

• 用途：现代浏览器环境下的简单请求。

3. Axios

简介：
基于 Promise 的第三方 HTTP 库，功能强大。
代码示例：

axios.get('https://api.example.com/data', {
  params: { id: 1 },
  timeout: 5000
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

特点：

• 优点：

  • 支持请求/响应拦截器。

  • 自动转换 JSON 数据。

  • 浏览器和 Node.js 通用。

• 缺点：需额外安装依赖。

• 用途：企业级项目，需要复杂配置（如拦截器、取消请求等）。

4. WebSocket

简介：
全双工通信协议，适用于实时交互（如聊天室、股票行情）。
代码示例：

const socket = new WebSocket('wss://api.example.com/ws');
socket.onopen = () => socket.send('Hello Server!');
socket.onmessage = (event) => console.log(event.data);
socket.onclose = () => console.log('Connection closed');

特点：

• 优点：实时双向通信，低延迟。

• 缺点：需后端支持 WebSocket，不适合普通 HTTP 请求。

• 用途：实时推送场景（如在线游戏、即时通讯）。

5. GraphQL

简介：
通过单一端点灵活查询数据，由客户端定义返回字段。
代码示例（使用 Apollo Client）：

import { ApolloClient, gql } from '@apollo/client';

const client = new ApolloClient({ uri: 'https://api.example.com/graphql' });

client.query({
  query: gql`
    query GetUser($id: ID!) {
      user(id: $id) {
        name
        email
      }
    }
  `,
  variables: { id: 1 }
}).then(result => console.log(result.data));

特点：

• 优点：减少冗余数据传输，强类型（需搭配 Schema）。

• 缺点：学习成本高，需后端支持 GraphQL。

• 用途：复杂数据查询场景（如 CMS、社交网络）。

6. Server-Sent Events (SSE)

简介：
服务端单向推送数据（如实时通知）。
代码示例：

const eventSource = new EventSource('https://api.example.com/events');
eventSource.onmessage = (event) => console.log(event.data);
eventSource.onerror = () => eventSource.close();

特点：

• 优点：简单轻量，基于 HTTP 协议。

• 缺点：仅支持服务端到客户端的单向通信。

• 用途：实时通知（如新闻更新、日志流）。

7. JSONP（已淘汰）

简介：
通过 <script> 标签跨域请求数据（仅限 GET）。
代码示例：

function handleResponse(data) {
  console.log(data);
}
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

特点：

• 优点：兼容老浏览器，绕过跨域限制。

• 缺点：不安全，仅支持 GET，已被 CORS 替代。

• 用途：旧系统临时解决方案。

对比总结

如何选择？

1. 普通 REST API：优先用 Axios 或 Fetch。

2. 实时双向通信：选 WebSocket。

3. 服务端推送：用 SSE。

4. 复杂数据查询：考虑 GraphQL。

5. 兼容旧浏览器：XHR 或 JSONP（不推荐新项目使用）。