当前位置：首页 > news >正文

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

news 2025/8/13 9:45:41

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) {nameemail}}`,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 替代。
用途：旧系统临时解决方案。

对比总结

方法	协议	方向	实时性	适用场景
XHR	HTTP	客户端→服务端	低	传统 AJAX 请求
Fetch	HTTP	客户端→服务端	低	现代简单请求
Axios	HTTP	客户端→服务端	低	复杂企业级应用
WebSocket	WS	双向	高	实时聊天、游戏
GraphQL	HTTP	客户端→服务端	低	灵活数据查询
SSE	HTTP	服务端→客户端	中	服务端推送通知
JSONP	HTTP	客户端→服务端	低	旧浏览器跨域（已淘汰）